Webpack之html,css,js

在打包css之前，需要知道module有什么作用，还有loader。

module 主要是用来配置不同的加载器，而加载器是用于不同的文件。

loader 主要用于将不同的文件都转换成js文件，如css，ES6等。

所有的Loaders都需要在npm中单独进行安装，并在webpack.config.js里进行配置。

• test：匹配处理文件的扩展名的正则表达式
• use：loader名称，就是你要使用模块的名称
• include/exclude:手动指定必须处理的文件夹或屏蔽不需要处理的文件夹
• query：为loaders提供额外的设置选项

打包css文件

建立index.css文件

src/css/index.css

body{
    background-color: red;
    color: white;
}

CSS文件建立好后，需要引入到入口文件中，才可以打包到，这里我们引入到entry.js中。

/src/entery.js中在首行加入代码：

import './css/index.css';

配置loader

解析css的loader需要style-loader和css-loader

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

style-loader：用于处理css中url等
css-loader： 用于将css插入到页面的style标签

module属性中的配置

module: {
    rules: [
      {
        test: /.css$/,
        use: ['style-loader','css-loader'],
        include: path.join(__dirname,'./src'),
        exclude: /node_modules/
      }
    ]
  }

注意顺序很重要，即先用style-loader解析，然用css-loader添加到style标签中

配置js压缩

js压缩就需要用到plugins

webpack4.x的production模式默认压缩，不需要配置。

其他版本
webpack默认集成uglifyjs-webpack-plugin，所以只需要引入就好了。

const uglify = require('uglifyjs-webpack-plugin');

在插件配置中添加

plugins:[
        new uglify()
    ],

只能在生产环境中使用，开发环境会报错

自动发布html

前面的index.html是手动添加，需要自动生成，添加资源。

npm install --save-dev html-webpack-plugin

在配置文件中

const htmlPlugin= require('html-webpack-plugin');

plugins: [
    new HtmlWebpackPlugin({
        template: './src/index.html',   // 指定产出的模板
        filename: 'base.html',          // 产出的文件名
        chunks: ['entry1','entry2'],     // 在产出的HTML文件里引入哪些代码块
        hash: true,                     // 名称是否哈希值
        title: 'base',                  // 可以给模板设置变量名，在html模板中调用 htmlWebpackPlugin.options.title 可以使用
        minify: {                       // 对html文件进行压缩
            removeAttributeQuotes: true // 移除双引号
        }
    })
]