webpack1.X 渐进教程(一)

时间 2019-11-06

标签 webpack1.x webpack 渐进教程繁體版

原文原文链接

1. 安装webpack

npm Install webpack －g
（－g 表明全局安装，这样就不用每一个使用webpack的项目都在当前项目中再安装一遍了。）css

2.初步使用

如今咱们不用任何config文件（了解下过程，项目中确定不会这么用），可是要有一个你想要编译的文件，好比一个js文件，一张图片，一个sass文件。
下面咱们来release一个js文件(test.js，这个文件里只写一句：):html

// test.js

alert('hellow world')

用法：webpack 入口文件目标地址
使用：webpack ./test.js ./dist/bundle.jsvue

而后你去look一下./dist/bundle.js这个文件的内容，不要care是否看的懂，just一句一句的看两边。node

3.使用配置文件

webpack ./test.js ./dist/bundle.js 这样的usage体验确定是很差的，这时候就该配置文件登场了:webpack.config.js,这是webpack默认的配置文件名，固然你也能够修改，这个后面再讲。jquery

:webpack

// webpack.config.js
// 这里展现了最最基本的配置

module.exports = {
     entry: './test.js',
     output: {
         path: './dist',
         // filename: '[name]-[chunkhash:8].bundle.js',
         // filename: '[name]-[hash].bundle.js', 下面有解释 chunkhash 和 hash 的区别
         filename: 'bundle.js',
     },
     module: {
         // loaders
     },
     plugins: [
        // plugins
     ]
 }

chunkhash:当前“代码块”（chunk）的hash值，也能够理解为是代码块内容的md5值，若是代码没有修改，这个值是不会改变的；不然一概改变。
hash:webpack本次编译的hash值,任何一个文件的改变都会有新的hash生成。es6

contenthash:指根据当前文件的内容计算md5。可是require进来的内容改变也会引发它的改变。
以上3个值都没法很好的知足现实开发中的需求，由于咱们想要的是：咱们打开某个编译好的文件，若是它自己的内容有所改变（不包括require进来的文件：css，image等），才去计算新的md5值。
这里推荐一片文章讲的很清楚：Webpack中hash与chunkhash的区别，以及js与css的hash指纹解耦方案，文中提到的webpack-md5-hash是个很好的选择。(补充：webpack-md5-hash有坑，勿入！坑：vendor引用了修改的chunk，但vendor的hahs并不会改变！)web

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

4.ES6 or Sass or React or Vue

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

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

ES6
加载器：babel-loader

用法：先安装npm install babel-loader --save-dev(若是报错，那么就根据提示缺什么 install 什么，好比babel-core等)
详细用法

module: {
    loaders: [{
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
    }]
}

再加一个sass-loader

Sass
加载器：babel-loader

用法：先安装npm install sass-loader --save-dev(若是报错，那么就根据提示缺什么 install 什么,好比：node-sass,它不是一个loader，可是sass-loader依赖它。)详细用法

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

5.更多用法

Now,咱们还剩一个plugins:[]。
如今咱们有一个需求，刚才咱们编译好的bundle.js文件要引入到咱们的某个.html文件中进行使用。可是若是咱们像上面配置的那样加了hash值：[name]-[hash].bundle.js,文件名会因为文件内容的变化而变化，咱们总不能 again and again 地修改html文件中的引用路径吧～So,找个插件来帮忙吧:html-webpack-plugin.

html-webpack-plugin
插件：同样要先安装npm install html-webpack-plugin --save-dev

用法：

var HtmlWebpackPlugin = require('html-webpack-plugin');

// ...
plugins: [
    new HtmlWebpackPlugin({
        // <title>个人webpack</title>
        title:"个人webpack",
        // [name]-[hash].bundle.js要写入的html文件路径
        // 默认根路径是： output.path ， 默认文件名是： index.html(eg：./dist/index.html)
        filename: './index.html',
        // template: './myIndex.html' 下面会讲到
    })
]
// ...

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <!--这里就是 HtmlWebpackPlugin的功劳-->
    <title>个人webpack</title>
  </head>
  <body>
  <!--这里就是 HtmlWebpackPlugin的功劳-->
    <script src="bundle.js"></script> 
  </body>
</html>

上面这个index.html是HtmlWebpackPlugin的功劳本身生成的，全部的内容都须要在new HtmlWebpackPlugin({})中配置好（详细配置说明）。可是，多数状况下，咱们会有本身index.html or myIndex.html,这些文件是咱们已经添加了样式或者插入了其它代码。这时候template就派上用场了。咱们本身的myIndex.html须要是这样的：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <!-- 注意这里的语法，固然你也能够将title写死在这里，这样配置文件中的title便不会起做用！ -->
        <title><%= htmlWebpackPlugin.options.title %></title>
        <link rel="stylesheet" href="style.css">
        <style media="screen">
            .body{
                margin: 0px;
            }
        </style>
    </head>
    <body>
    <script src="other.js"></script>
    </body>
</html>

生成的文件是这样的：

<html>
    <head>
        <meta charset="utf-8">
        <title>个人webpack</title>
        <link rel="stylesheet" href="style.css">
        <style media="screen">
            .body{
                margin: 0px;
            }
        </style>
    </head>
    <body>
    <script src="other.js"></script>
    <script src="bundle.js"></script>
    </body>
</html>

webpack自带的和社区贡献的有不少优秀的插件，好比项目中会用到不支持AMD或者CommonJS的js库，webpack.ProvidePlugin(webpack自带的)妥妥的帮我解决这个问题：

// ...
plugins: [
    new HtmlWebpackPlugin({
        filename: './dist/index.html'
    }),
    //就能够屁颠屁颠的这么使用了：import $ from 'jquery'
    // 注意：你得先在某处引用jquery.js
    // 必入index.html中：<script src="jquery.js"></script>
    new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery",
        "window.jQuery": "jquery"
    })
  ]
  
  // ...