webpack3学习笔记

何为webpack

webpack是一个前端模块化方案，更侧重模块打包，我们可以把开发中的所有资源（图片、js文件、css文件等）都看成模块，通过loader（加载器）和plugins（插件）对资源进行处理，打包成符合生产环境部署的前端资源。

webpack初体验

命令：webpack 被打包目录 打包目录

本地安装webpack，创建两个文件夹：src开发目录，dist生产目录

基本结构如下：

├── dist
│    └── index.html
├── src  
│    └── entry.js

执行打包命令：webpack ./src/entry.js ./dist/bundle.js
这时候，神奇的事情出现了，dist多了一个bundle.js文件

初识webpack.config.js

我们知道前端提倡工程化思想，然而上面的打包方式显然违背了这个思想。
于是我们使用webpack配置文件webpack.config.js进行打包

webpack.config.js的代码如下

module.exports = {
    entry:{
        entry:'./src/entry.js', //entry为打包后的文件名，即output里的[name]
    },
    output:{
        path:path.resolve(__dirname,'dist'),
        filename:'[name].js', //打包后生成的文件名
    },
}

在这段代码中：

• entry表示入口，它可以有多个入口文件
• output表示出口，它可以有多个出口文件
• path表示打包到的目录，使用__dirname可以兼容不同系统
• filename表示打包后的文件名

这样子，我们只需要执行一条命令：webpack 就完成了打包

uglifyjs-webpack-plugin

前面我们完成了js的打包，但是打包后的代码却占了大量的空间，为了减少数据量，我们要对它进行压缩，这里我们使用的插件是uglifyjs-webpack-plugin

既然使用到了插件，就需要在webpack配置文件中进行以下配置：

1. 引入插件（注：这个插件是不需要安装的）
   const uglify = require('uglifyjs-webpack-plugin');
2. 配置插件（注：使用插件都使用到new）

//插件
plugins:[
new uglify() //压缩
],

然后再执行webpack，我们发现js文件大大减小了

html-webpack-plugin

上面我们说到，我们有两个目录src和dist。这里有一个问题，我们在dist目录下创建了一个index.html。
我们知道dist目录是生产目录，它下面的文件都应该是自动生成的，而不应该手动添加，修改。
于是我们使用html-webpack-plugin插件。
同样的步骤，这样就不赘述了。

以下是配置插件的代码：

//插件
plugins:[
    new htmlPlugin({
        minify: { removeAttributeQuotes:true //去除属性的引号 },
        hash: true,
        template: './src/index.html',
    })
],

在这段代码中：

minify

minify 的作用是对 html 文件进行压缩，minify 的属性值是一个压缩选项或者 false 。默认值为false, 不对生成的 html 文件进行压缩。来看看这个压缩选项。执行结果：

test minify

test minify

hash

hash选项的作用是 给生成的 js 文件一个独特的 hash 值，该 hash 值是该次 webpack 编译的 hash 值。默认值为 false 。执行结果：

执行 webpack 命令后，你会看到你的生成的 html 文件的 script 标签内引用的 js 文件，是不是有点变化了。

bundle.js 文件后跟的一串 hash 值就是此次 webpack 编译对应的 hash 值。

template

模板文件
我们删除dist文件夹，然后webpack执行
执行后的结果为：
生成了dist文件夹，并且里面有index.html和entry.js两个文件

loader配置

前面我们讲了js的打包和压缩，那么我们如何对css文件进行打包呢？

我们在entry.js中引入css文件import css from './css/index.css';
然后执行webpack进行打包
然而这样就行了吗！？ 这样运行是会报错的
为什么，因为webpack打包出来的都是js文件，它无法转换css格式
这就需要我们安装两个loader： style-loader&css-loader

wepback为了实现将css，sass，less打包为js，需要对应的loader支持

这里以style-loader&css-loader为例：

1. 安装style-loader&css-loader
2. 配置style-loader&css-loader

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

上面增加了一条规则（rule）：所有以.css结尾的文件用style-loader&css-loader处理。
这样子，我们再执行webpack命令，就可以将css文件一并打包到bundle.js文件中了。

less&sass

我们平常写代码时，不会仅使用css，可能会使用功能更强大的less，sass。那么我们如何对这些格式进行打包呢？

先将less&sass转换成css，再进行打包就可以了
代码如下：

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

很多人一下子看到这么多loader，可能就乱了。别急，我给你理一理这些loader

首先我们要知道一件事：loader的加载顺序是从右往左，从下往上的。
对于css打包，我们的代码是use:['style-loader','css-loader']，从右往左，先使用css-loader再使用style-loader。less你可以参考上面的代码。

然后再说说各loader的作用：

• css-loader：处理css文件中的url()等
• style-loader：将css插入到页面的style标签
• less-loader ：将less文件编译成css
• sass-loader ：将sass文件编译成css

怎么样，现在是不是很清晰了。

代码抽离

上面我们说到如何将css，less，sass打包成js文件。但是可能开发中，我们需要将它们抽离出来，形成单独的css文件。这样子应该怎么做呢？

没错，我们要用到一个插件，它的名字是extract-text-webpack-plugin
基本步骤就不扯了，直接上代码

plugins:[
     new extractPlugin('css/index.css'),//打包后的文件路径和文件名
],

相应的，我们也要修改loader的配置，这里以less为例：

 {
    test:/\.less$/,
    use:extractPlugin.extract({
        use:[{
            loader:'css-loader'
        },{
            loader:'less-loader'
        }],
        fallback:'style-loader'
    })
},

经过use操作后less打包成了一个css文件，然后使用fallback
fallback: 编译后用什么loader来提取css文件

注：以上笔记参考了技术胖的webpack3.x成神之路，以及很多大神的博客
会持续更新。写的不好，有错欢迎踩**
另：博客链接地址：
Webpack3.X版 成神之路 技术胖