webpack躺坑--指南篇一

安装

1. 安装
   首先确定安装了node.js，nodejs安装在此不做赘述
   然后安装webpack，在此安装的为webpack4+，webpack的前面几代版本与webpack4+版本有所出入，该文档仅作webpack4+解释。使用之前版本可能打包不成功。
   命令行模式下，cd进使用npm init初始化的项目的根目录。本地安装webpack。

   npm install --save-dev webpack
   

   由于使用的是webpack4+
   在此还需要安装webpack-cli

   npm install --save-dev webpack-cli
   

   我安装webpack时，全部使用的是本地安装（–save-dev），没有使用全局安装（-g），最大的原因就是不同的项目可能使用的不同的版本的webpack，如果全局安装，有可能应为版本的不同打包失败，所以，尽量使用本地安装，容易控制依赖版本。

2. 起步
   首先，我们需要改变引用外部资源（js等）的方法，如果使用<script src="./file.js"></script>的方式，会有以下问题出现：
   a、无法立即体现，脚本的执行依赖于外部拓展库
   b、如果依赖不存在，或者引入顺序错误，应用程序将无法正常运行。
   c、如果依赖被引用但是并没有使用，浏览器将被迫下载无用代码

3. 打包js
   我们将所有引入外部依赖包的形式改为import tool from 'tool'类似方式，既可一开始下一步打包操作。由于webpack4+安装了webpack-cli，node8.2+版本提供了npx命令，可以直接使用npx webpack调用在初始安装的webpack包中的webpack二进制文件，这样的打包只能用于基础简单的项目。
   实际上，在大多数的项目中，都会需要很复杂的设置，这就需要用到webpack.config.js，我们自己设置配置使用，用来取代使用CLI选项方式的配置文件。
   通过在package.json文件中添加一行build脚本

    "scripts": {
       "test": "echo \"Error: no test specified\" && exit 1",
       "build": "webpack --config webpack.config.js"
     },
   

   添加webpack.config.js文件，内容为

   const path = require('path');
   module.exports = {
       entry: ['./src/index.js', './src/jstest.js'],
       output: {
           filename: 'bundle.js',
           path: path.resolve(__dirname, 'dist')
       }
   };
   

   这里使用了数组的方式，我将所有的入口js打包如一个bundle中。
   运行npm run build即可打包，当前需要将index.html移入到dist文件夹中，并修改其中引入的js为./bundle.js。

4. 打包资源文件
   webpack最出色的功能之一就是，除了JavaScript，还可打包任何其他类型的文件。同样的，需要用显式依赖的方式引入。
   首先试着将css文件打包，需要先安装可以打包css样式的loader

   npm install --save-dev style-loader css-loader
   

   同时在webpack.config.js中添加

    module: {
           rules: [
               {
                   test:/\.css$/,
                   use: [
                       'style-loader',
                       'css-loader'
                   ]
               }
           ]
       }
   

   这里的test中的值是一个正则表达式，标识以.css结尾的全部文件，都将会提供给style-loader和css-loader。
   下列会根据不同的文件给出不同的loader

文件类型	loader
css	style-loader, css-loader, postcss-loader
png, svg, jpg, gif	file-loader
woff, woff2, eot, ttf, otf	file-loader
csv, tsv	csv-loader
xml	xml-loader

5. 管理输出
   我们前面一直是用自己造的index.html，但是，当我们用到hash给文件命名时，hash值会一直在边，我们没有办法做到每一次构建时，都去手动更改index.html中的引入文件的名称，所以，我们需要让webpack帮我们生成index.html，这里就用到了插件plugins，安装html-webpack-plugin插件，同时在 webpack.config.js中插入下述代码

   const HtmlWebpackPlugin = require('html-webpack-plugin');
   ...
   plugins: [
           new HtmlWebpackPlugin({
               title: 'Output Management'
           })
    ],
   

这样再次运行 npm run build webpack会帮我们建一个index.html。
并且由于我们之前的dist生成的许多已经用不上的文件依然存在于dist文件夹中，我们可以使用webpack在每次构建前清理/dist文件夹，让dist文件夹中只有我们会用到的文件，这里需要安装clean-webpack-plugin插件，同时在webpack.config.js中添加下述代码

 const CleanWebpackPlugin = require = require('clean-webpack-plugin');
 ...
 plugins: [
        new HtmlWebpackPlugin({
            title: 'Output Management'
        }),
        new CleanWebpackPlugin(['dist']),
    ],