webpack1.X渐进教程(一)

1. 安装webpack

npm Install webpack &＃xff0d;g
&＃xff08;&＃xff0d;g 代表全局安装&＃xff0c;这样就不用每个使用webpack的项目都在当前项目中再安装一遍了。&＃xff09;

2.初步使用

现在我们不用任何config文件&＃xff08;了解下过程&＃xff0c;项目中肯定不会这么用&＃xff09;&＃xff0c;但是要有一个你想要编译的文件&＃xff0c;比如一个js文件&＃xff0c;一张图片&＃xff0c;一个sass文件。
下面我们来release一个js文件(test.js&＃xff0c;这个文件里只写一句&＃xff1a;):

// test.jsalert(&＃39;hellow world&＃39;)


用法&＃xff1a;webpack 入口文件 目标地址
使用&＃xff1a;webpack ./test.js ./dist/bundle.js

然后你去look一下./dist/bundle.js这个文件的内容&＃xff0c;不要care是否看的懂&＃xff0c;just一句一句的看两边。

3.使用配置文件

webpack ./test.js ./dist/bundle.js 这样的usage体验肯定是不好的&＃xff0c;这时候就该配置文件登场了:webpack.config.js,这是webpack默认的配置文件名&＃xff0c;当然你也可以修改&＃xff0c;这个后面再讲。

:

// webpack.config.js
// 这里展示了最最基本的配置module.exports &＃61; {entry: &＃39;./test.js&＃39;,output: {path: &＃39;./dist&＃39;,// filename: &＃39;[name]-[chunkhash:8].bundle.js&＃39;,// filename: &＃39;[name]-[hash].bundle.js&＃39;, 下面有解释 chunkhash 和 hash 的区别filename: &＃39;bundle.js&＃39;,},module: {// loaders},plugins: [// plugins]}

chunkhash:当前“代码块”&＃xff08;chunk&＃xff09;的hash值&＃xff0c;也可以理解为是代码块内容的md5值&＃xff0c;如果代码没有修改&＃xff0c;这个值是不会改变的&＃xff1b;否则一律改变。
hash:webpack本次编译的hash值,任何一个文件的改变都会有新的hash生成。

contenthash:指根据当前文件的内容计算md5。 但是require进来的内容改变也会引起它的改变。
以上3个值都无法很好的满足现实开发中的需求&＃xff0c;因为我们想要的是&＃xff1a;我们打开某个编译好的文件&＃xff0c;如果它本身的内容有所改变&＃xff08;不包括require进来的文件&＃xff1a;css&＃xff0c;image等&＃xff09;&＃xff0c;才去计算新的md5值。
这里推荐一片文章讲的很清楚&＃xff1a;Webpack中hash与chunkhash的区别&＃xff0c;以及js与css的hash指纹解耦方案&＃xff0c;文中提到的webpack-md5-hash是个很好的选择。(补充&＃xff1a;webpack-md5-hash有坑&＃xff0c;勿入&＃xff01;坑&＃xff1a;vendor引用了修改的chunk&＃xff0c;但vendor的hahs并不会改变&＃xff01;)

其中的module:{}和plugin:[]先忽略不管&＃xff0c;下面很快就会讲到。
Now,我们有了配置文件&＃xff0c;执行命令变得simple多了&＃xff1a;
webpack
就这么一个单词&＃xff0c;webpack会去配置文件里找入口文件 and 目标地址。

4.ES6 or Sass or React or Vue

可能再项目里用到了es6&＃xff0c;或者sass&＃xff0c;less等现阶段浏览器不能识别的语言&＃xff1b;或者你的文件是.jsxor.vue,这些文件里可能包含了HTML,CSS,SASS,ES6等等浏览器或者你的应用所运行的环境&＃xff0c;但是这些环境不能识别这些文件or语法or语言&＃xff0c;这个时候就需要先将它们编译成能够被识别并执行的语言or语法。

Now,让webpack中的主角loader登场。loader中文就是装载器&＃xff0c;比如把es6装进es6-loader(这是一个假名字)中&＃xff0c;过一会儿&＃xff0c;es6&＃xff0d;loader里面的es6就变成es5 or es3 了。
注意&＃xff1a;loader相关的配置都写在上面提到的module:{}中。具体用法如下&＃xff1a;

• ES6
  加载器&＃xff1a;babel-loader

用法&＃xff1a;先安装npm install babel-loader --save-dev(如果报错&＃xff0c;那么就根据提示缺什么 install 什么&＃xff0c;比如babel-core等)
详细用法

module: {loaders: [{test: /\.js$/,exclude: /node_modules/,loader: &＃39;babel-loader&＃39;}]
}

再加一个sass-loader

• Sass
  加载器&＃xff1a;babel-loader

用法&＃xff1a;先安装npm install sass-loader --save-dev(如果报错&＃xff0c;那么就根据提示缺什么 install 什么,比如&＃xff1a;node-sass,它不是一个loader&＃xff0c;但是sass-loader依赖它。)详细用法

// ...
module: {loaders: [{test: /\.js/,exclude: /node_modules/,loader: &＃39;babel-loader&＃39;},{test: /\.scss/,exclude: /node_modules/,loader: &＃39;sass-loader&＃39;}]
}
// ...

5.更多用法

Now,我们还剩一个plugins:[]。
现在我们有一个需求&＃xff0c;刚才我们编译好的bundle.js文件要引入到我们的某个.html文件中进行使用。但是如果我们像上面配置的那样加了hash值&＃xff1a;[name]-[hash].bundle.js,文件名会由于文件内容的变化而变化&＃xff0c;我们总不能 again and again 地修改html文件中的引用路径吧&＃xff5e;So,找个插件来帮忙吧:html-webpack-plugin.

• html-webpack-plugin
  插件&＃xff1a;一样要先安装npm install html-webpack-plugin --save-dev

用法&＃xff1a;

var HtmlWebpackPlugin &＃61; require(&＃39;html-webpack-plugin&＃39;);// ...
plugins: [new HtmlWebpackPlugin({// title:"我的webpack",// [name]-[hash].bundle.js要写入的html文件路径// 默认根路径是&＃xff1a; output.path &＃xff0c; 默认文件名是&＃xff1a; index.html(eg&＃xff1a;./dist/index.html)filename: &＃39;./index.html&＃39;,// template: &＃39;./myIndex.html&＃39; 下面会讲到})
]
// ...

上面的配置会将output输出的文件bundle.js自动引入到./dist/index.html文件中

上面这个index.html是HtmlWebpackPlugin的功劳自己生成的&＃xff0c;所有的内容都需要在new HtmlWebpackPlugin({})中配置好&＃xff08;详细配置说明&＃xff09;。但是&＃xff0c;多数情况下&＃xff0c;我们会有自己index.html or myIndex.html,这些文件是我们已经添加了样式或者插入了其它代码。这时候template就派上用场了。我们自己的myIndex.html需要是这样的&＃xff1a;

生成的文件是这样的&＃xff1a;

webpack自带的和社区贡献的有很多优秀的插件&＃xff0c;比如项目中会用到不支持AMD或者CommonJS的js库&＃xff0c;webpack.ProvidePlugin(webpack自带的)妥妥的帮我解决这个问题&＃xff1a;

// ...
plugins: [new HtmlWebpackPlugin({filename: &＃39;./dist/index.html&＃39;}),//就可以屁颠屁颠的这么使用了&＃xff1a;import $ from &＃39;jquery&＃39;// 注意&＃xff1a;你得先在某处引用jquery.js// 必入index.html中&＃xff1a;new webpack.ProvidePlugin({$: "jquery",jQuery: "jquery","window.jQuery": "jquery"})]// ...