webpack配置：css文件打包、JS压缩打包和HTML文件发布

1、CSS文件打包

　　一、在src下新建css文件，在css文件下新建index.css文件，输入如下代码

body{ color:red; font-size:20px; }

　　二、css创建好后，须要引入到入口文件，这里咱们引入到index.js中

import css from './css/index.css'; document.write("It works.");

　　三、在终端安装style-loader和css-loader

　　四、安装好后，咱们开始在webpack.config.js中配置module选项

//模块：例如解读CSS,图片如何转换，压缩
module:{ rules:[ { test:/\.css$/, use:['style-loader','css-loader'] } ] },

　　五、在终端输入 npm run server，能够看到出来的效果有了样式。

2、JS压缩打包

一、首先在webpack.config.js中引入

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

二、而后在plugins里配置

//插件，用于生产模版和各项功能
plugins:[ new uglify() ],// 插件，多个插件，因此是数组

const path = require('path'); const uglify = require('uglifyjs-webpack-plugin'); module.exports={ //入口文件的配置项
 entry:{ entry:'./src/index.js' }, //出口文件的配置项
 output:{ //输出的路径，用了Node语法
        path:path.resolve(__dirname,'dist'), //输出的文件名称
        filename:'bundle.js' }, mode:"development", //模块：例如解读CSS,图片如何转换，压缩
 module:{ rules:[ { test:/\.css$/, use:['style-loader','css-loader'] } ] }, //插件，用于生产模版和各项功能
 plugins:[ new uglify() ],// 插件，多个插件，因此是数组 //配置webpack开发服务功能
 devServer:{ contentBase:path.resolve(__dirname,'dist'),//本地服务器所加载的页面所在的目录
        host:'192.168.118.221', compress:true, port:8081 }// 配置webpack服务
}

三、在终端输入webpack，你会发现JS代码已经被压缩了

3、HTML文件发布

一、把dist中的index.html复制到src目录中，并去掉咱们引入的js

二、在webpack.config.js中引入

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

三、引入后进行安装   npm install html-webpack-plugin --save-dev

四、在webpack.config.js中进行插件配置

plugins:[ new uglify(), new htmlPlugin({ minify:{ removeAttributeQuotes:true }, hash:true, template:'./src/index.html' }) ],// 插件，多个插件，因此是数组

五、在终端中输入webpack，进行打包，你会看到index.html文件已经被咱们打包到dist文件目录下了，而且自动引入了js文件