Webpack打包流程

创建一个新项目然后执行

npm init

全局安装webpack;webpack-cil

npm install -g webpack
 
npm install -g webpack-cil

将webpack安装到项目依赖,这样就可以使用本地版的webpack

npm install webpack -save-dev
 
npm install webpack-cil -save-dev

创建webpack.config.js,进行配置

const path = require('path');
 
const webpack = require('webpack');
 
const HtmlWebpackPlugin = require('html-webpack-plugin');
 
const CopyPlugin = require('copy-webpack-plugin');
 
module.exports = {
 
mode: 'development',
 
entry: './src/index.js', // 指定打包入口文件
 
output: {
 
filename: 'index.js', // 指定打包输出文件名
 
path: path.resolve(__dirname, './public'), // 指定打包输出路径
 
},
 
module: { // 对模块的处理逻辑
 
rules: [ // 一系列的加载器的处理逻辑
 
{
 
test: /\.css$/, // 正则 匹配到文件后缀
 
use: [
 
'style-loader',
 
'css-loader',
 
], // 用此加载器处理匹配到的文件
 
exclude: [ // 排除此文件夹下的文件
 
path.resolve(__dirname, './node_modules')
 
]
 
}
 
],
 
},
 
resolve: {
 
extensions: ['.js', '.json', '.jsx', '.css'] // 自动补全识别后缀
 
},
 
plugins: [
 
new HtmlWebpackPlugin({
 
template: './src/index.html',
 
minify: {
 
removeAttributeQuotes: true,
 
},
 
hash: true,
 
}),
 
new webpack.EnvironmentPlugin(
 
{
 
NODE_ENV: 'development',
 
TEST: 'true',
 
}
 
),
 
new CopyPlugin({
 
patterns: [
 
{from: path.resolve(__dirname, './src/index.css'), to: path.resolve(__dirname, './public')},
 
],
 
}),
 
],
 
// 配置webpack服务
 
devServer: {
 
port: 8000, // 启动服务监听端口
 
host: 'localhost', // 可以通过localhost访问
 
open: true, // 自动打开浏览器
 
hot: true, // 启动热更新
 
},
 
};

安装HTMLWebpackPlugin;该插件将为你生成一个 HTML5 文件， 在 body 中使用 script 标签引入你所有 webpack 生成的 bundle。 只需添加该插件到你的 webpack 配置中

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

两种打包方式

webpack --mode development // 开发模式 不压缩
 
webpack --mode production // 生产模式 压缩

安装webpack-dev-server

npm install --save-dev webpack webpack-dev-server
 
const Webpack = require('webpack');
 
const WebpackDevServer = require('webpack-dev-server');

进行打包之后启动项目

"scripts": {
 
"test": "mocha",
 
"start": "webpack-dev-server",
 
"dev": "webpack --mode development"
 
},// 在package.json 里面进行配置
 
// 然后执行
 
npm run start // 项目启动&热更新
 
npm run dev // 再次打包
 
npm run test // 执行测试