webpack小结

1.npm install webpack webpack-cli -D

2.新建webpack.config.js

基础配置见官网

3.在package.json 中增加命令

scripts: {
bulid: ‘webpack --config webpack.config.js’
}

4.main.js中引入js代码

5.安装识别css 的loader

npm install style-loader css-loader -D

6.引入分离css文件的模块

mini-css-extract-plugin -D

7.图片loader file-loader ulr-loader

options: {
limit : 30*K // 小于该值在打包为base,否则打包为路径
}
name: ‘[name].[ext]’，
publicPath: ‘…/images/’，
outputPath: ‘images/’

8.清除dist 目录下的插件

clean-webpack-plugin

9.babel 配置

10自动刷新webpack-dev-server

配置scripts
scripts: {
build: 'webpack --config webpack.config.js’，
dev: ‘webpack-dev-server --confif webpack.config.js’
}
webpack-dev-server配置
devServer : {
port: 3000,
open:true
}

遇到的问题：
执行npm run dev报错
Error: Cannot find module ‘webpack-cli/bin/config-yargs’
解决方案
卸载当前的 webpack-cli npm uninstall webpack-cli
安装 webpack-cli 3. 版本 npm install webpack-cli@3 -D

11.webpack-merge

12.多入口

entry: {
index:’./src/index.js’,
about: ‘./src/about.js’
}
output: {
path: path.jogin(_dirname,’…/dist’),
filename: 'js/[name].bundle.js // name 指代entry中的键名。
//提取公共模块
optimization: {
splitChunks:{
chunks: ‘all’ //提取所有文件的共同模块
}
}
13.vue-loader配置见官网