webpack3最新版本配置研究（一）loader

来源：互联网发布：logo软件中文版下载编辑：程序博客网时间：2024/06/07 07:58

webpack这货还是挺火的,目前前端不管是react和vue都用这个打包,还是挺好用的，本文刚开始写的是webpack2，但后来发现webpack3可以无伤升级就升级了下，据说webpack3相对于2的生成的代码运行速度更快！在家里装了个最新版本的nodejs8.4.0，附带的npm是5.3.0的，有的时候install的时候会爆Cannot read property ‘0’ of undefined，目前的办法是npm install -g npm@5.2.0退级，或者安装nodejs6的稳定版，之后可能会处理这个bug

什么是Webpack

WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。

WebPack和Grunt以及Gulp相比有什么特性

其实Webpack和另外两个并没有太多的可比性，Gulp/Grunt是一种能够优化前端的开发流程的工具，而WebPack是一种模块化的解决方案，不过Webpack的优点使得Webpack可以替代Gulp/Grunt类的工具。

webpack的安装和其他的npm包类似

npm init  //一路回车,这里要注意name最好不要取什么webpack，grunt，glup之类的，不然可能会爆refusing to install xxxx as a dependency of itself//全局安装npm install -g webpack//安装到你的项目目录，最好制定一个版本号npm install --save-dev webpack@3.4.0

首先是最简单的webpack打包

//index.html<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>index</title></head><body>  <div id="parent">  </div></body><script src="bundle.js"></script></html>//index.jsconst divItem = require('./div');document.getElementById('parent').appendChild(divItem());//div.jsmodule.exports = () => {    const divDom = document.createElement('div');    divDom.textContent = 'write something';    return divDom;}//webpack.config.jsmodule.exports = {  // 打包文件的存放地址  entry: __dirname + "/index.js",  output:{    // 打包后存放地址    path: __dirname,    // 输出后的文件名    filename: 'bundle.js'  }}//package.json中将scripts修改，npm run webpack命令会调用webpack命令行"scripts": {  "webpack":"webpack"}

然后在当前文件夹使用命令行输入npm run webpack 就可以将index的文件和他的require全都打到bundle中了，首先先执行了npm中的script调用了webpack命令，webpack命令直接执行了webpack.config.js中的配置，将index.js打包到bundle文件里引入

Loader
webpack通过调用外部的脚本可以对各种文件进行处理，把下一代的ES6，ES7转换为ES5。或者说对React的开发而言，可以把React的JSX文件转换为JS文件。也可以将css打包到js中，例如style和css的loader，在webpack1中loader在module中是用loaders字段的，在webpack2中使用的是rules字段

babel
babel是loader中比较重要的，用来将es6和es7转换成es5来进行浏览器的展示，用下列命令安装它们
npm install –save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react

module: {  rules: [    {        test: /\.js|jsx$/, //是一个正则，代表js或者jsx后缀的文件要使用下面的loader        loader: "babel-loader"    }  ]}//创建一个.babelrc,webpack中的babel会自动调用该文件的配置到babel中转换js{  "presets": ["react", "es2015"]}

这时再运行下npm run webpack之后，发现之前index和div中的const写法被转换成es5的var了

cssloader
用来解析js中引入的css和sass，老规矩
npm install –save-dev style-loader css-loader

//webpack.config.js中修改modulemodule: {    rules: [      {        test: /\.js|jsx$/, //是一个正则，代表js或者jsx后缀的文件要使用下面的loader        loader: "babel-loader"      },      {        test: /\.css$/,        loader: "style-loader!css-loader"//添加对样式表的处理      }    ] }//生成一个index.css文件来添加一些样式#parent{  color: red;}//index.js中添加样式require('./index.css');

执行npm run webpack之后打开index.html是不是字体变红了呢？

阅读全文

2 0