Webpack个人总结

之前学习webpack由于版本问题以及学习的知识比较零散，所以走过很多弯路，现在通过自己一些编程的实践和看相关的书籍博客，来总结下相关的知识点。主要还是为了再熟悉一下webpack相关的打包流程，以及这种模块化的思维。也是对Vue，react这种框架的一种更加深入的理解。

首先新建一个webpack的空文件，然后按照流程先npm init，代表的是新建一个package.json文件，之后需要确认一些参数，当然如果想要全部输入默认值跳过提问环节的话可以直接输入npm init -y。之后会生成一个package.json文件。在这个文件里面，我们更关心script这一部分的内容，为了尝试这个功能我们做一个调试。在script里面增加这个字段：

1	"my": "node index.js"

其实，这里使用到了Npm Script，他是一个任务的执行者。允许在package.json这个文件里面使用script字段来定义任务。相当于我们使用npm run加上定义的字段可以来执行相关的指令。比如在这里输入npm run my就相当于输入了node index.js。

之后安装webpack。接下来我们来配置webpack。首先创建一个webpack.config.js。然后在在这个文件中添加下面的内容：

const path = require('path') //path是webpack中的基本包，处理路径
const config = {
    //入口文件
    entry: path.join(__dirname, 'src/js/test.js'),   //__dirname表示当前文件所在的目录地址，利用join()拼接成绝对路径
    // 输出文件
    output: {
        filename: 'bundle.js',//输出文件名
        path: path.join(__dirname, 'dist')
    }
}
module.exports = config

现在新建一个src文件，并在里面新建js文件，里面有个test.js文件，里面放入下面的代码：

1 2	import '../../index' console.log('this is test')

然后在下方的命令行中输入webpack。就可以进行打包了。最后输出了一个dist文件夹，里面有一个bundle.js文件就有我们之前的js文件里面的东西,。而且由于在这个文件中我们import了另外一个.js文件，这个js文件中的内容也被打包放在了上面。

现在我们在这里引入css文件。首先我们先在src文件下新建一个style文件，里面放入一个test.css文件：

1
2
3

body{
    color: red
}

由于在webpack里面，一切的文件类型都可以用js来打包，所以这里我们在js文件中import引入这个css模块，在index.js文件中引入这个文件：

1	import './src/style/test.css'

引入后由于在webpack并不能解析CSS，我们需要借助Loader机制去实现。在webpack.config.js中增加下面的内容：

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

这里声明了一个rules，test用正则表达式用来匹配需要用loader转换的CSS文件。这里，style-loader是将CSS代码写入到了js中去，css-loader正是读取css文件的，minimize用来压缩css文件。也可以写成下面的形式：

use:[
   'style-loader',
   {
      loader:'css-loader',
      options:{
         minimize:true
      }
   }
]

当然，如果将css代码放在js文件里面执行会导致js文件变大并且加载网页的时间变长，所以我们可以利用相关的插件将CSS文件单独分离出来。在webpack3一般用的是extract-text-webpack-plugin，但是很遗憾，这个在webpack4里面已经被废弃了，取而代之的是mini-css-extract-plugin。

module:{
        rules:[
            {
                test: /\.css$/,
                use:[MiniCssExtractPlugin.loader,'css-loader?minimize']
            }
        ]
    },
    plugins:[
        new MiniCssExtractPlugin({
            filename: 'css/[name].[contenthash:7].css'
        })
    ]

之后开始配置dev-server,现在script里面输入下面的内容：

1 2	"build": "cross-env NODE_ENV=production webpack --config webpack.config.js", "dev": "cross-env NODE_ENV=development webpack-dev-server --config webpack.config.js"

其实上面两个是设置了两个指令，NODE_ENV定义了他们一个是生产模式一个是开发模式。–config后面是设置了webpack的配置文件。cross-env是说可以跨平台使用。同时这里需要安装几个插件：

1	npm i html-webpack-plugin webpack-dev-server cross-env

然后修改webpack配置文件中的设置，先定义一个变量判断当前的运行环境：

1	const isDev = process.env.NODE_ENV === 'development'

然后下面根据当前环境判断是否启动：

if (isDev) {
    config.devtool = '#cheap-module-eval-source-map'  //帮助在页面上调试代码, 优化显示  
    config.devServer = {
        port: 8088,
        //host 可以通过localhost进行访问，同时也可以通过本机的内网id进行访问，就能够在别的网页或者手机上访问
        host:'0.0.0.0',
        //overlay 编译过程有任何错误都直接显示到网页上
        overlay: {
            errors: true
        },
        // 当修改组件代码时，只重新渲染当前组件，不会让整个页面重新加载；hot启动后要添加以下两个插件
        hot: true
 
        // 能够在运行后直接打开浏览器
        // open: true
    }
    // 启动webpack.hot功能的插件
    config.plugins.push(
        new webpack.HotModuleReplacementPlugin(), //启动hot功能
        new webpack.NoEmitOnErrorsPlugin()    //减少不需要信息的提示  
        )
}

这时候运行npm run dev就能正常启动服务器了，但是这样显示出来的只是一个这样的页面： 1542031492627

说明我们还没有一个初始化的HTML文件。所以为了让webpack-server有一个默认的页面，我们再用一个插件来快速生成：

var HtmlwebpackPlugin = require('html-webpack-plugin');
//....
plugins: [
        new HtmlwebpackPlugin({
            title: 'Hello World app'
        })//在build目录下自动生成index.html，指定其title
    ],

这时候通过npm run build我们其实可以看见在dist里面生成了一个index.html文件，里面是这样的：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World app</title>
  <link href="css/main.7a0631b.css" rel="stylesheet"></head>
  <body>
  <script type="text/javascript" src="bundle.js"></script></body>
</html>

可以看见，这里里面包含了刚刚我们打包的css和js代码。这是因为不配置任何选项的html-webpack-plugin插件，他会默认将webpack中的entry配置所有入口thunk和extract-text-webpack-plugin抽取的css样式都插入到文件指定的位置。