webpack真是个神坑，吐槽不说了，直接开撸
webpack4的号称可以零配置使用
零配置使用
创建文件夹然后进入
mkdir webpack4-quickstart && cd $
初始化一个package.json
npm init -y
安装webpack4和webpack-cli
cnpm i webpack webpack-cli -D
打开package.json，加入一段script
"scripts":{
"build": "webpack"
}
尝试运行一下
npm run build
可以看见报错ERROR in Entry module not found: Error: Can't resolve './src' in '~/webpack-4-quickstart'
也就是说如果没有任何配置，webpack4会从./src中去获取入口js，以前版本的webpack都需要在webpack.config.js中定义entry:xxx.js
新特性：生成模式和开发模式
一个典型的项目会有
1.开发环境下的配置文件，可以使用webpack dev server或其他开发功能
2.生产环境下的配置文件，可以提供UglifyJSPlugin，sourcemaps和其他
但是webpack4你可以不需要一行配置，打开package.json写入如下脚本
"scripts": {
"dev":"webpack --mode development",
"build":"webpack --mode production"
}
通过运行npm run dev和npm run build可以发现./dist/main.js一个是压缩过的，一个是没压缩的
重写默认entry/output
也在package.json中定义
"scripts": {
"dev": "webpack --mode development ./foo/src/js/index.js --output ./foo/main.js",
"build": "webpack --mode production ./foo/src/js/index.js --output ./foo/main.js"
}
通过Babel编译Javascript
现代js主要都是用ES6，但不是每个浏览器都支持ES6,我们需要一些转换来解决兼容问题。
webpack当然是不知道怎么去转换的，但是可以用loaders，babel-loader就是用来把ES6转化成ES5的，首先我们需要安装依赖
cnpm i babel-core babel-loader babel-preset-env --save-dev
还需要创建Babel配置文件.babelrc
{
"presets": [
"env"
]
}
这时候我们还是创建一个webpack的配置文件吧，创建一个webpack.config.js的文件，然后写入
module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
}
]
}
};
如果你不打算自定义，那么你也可以不写入口文件，然后在./dist/index.js写入一下ES6代码，运行一下
npm run build
现在你可以在./dist/main.js去看编译后的代码了
如果你不想写配置文件，也可以在package.json中这样写
"scripts": {
"dev": "webpack --mode development --module-bind js=babel-loader",
"build": "webpack --mode production --module-bind js=babel-loader"
}
React设置webpack4
暂略
HTML插件
首先安装依赖
npm i html-webpack-plugin html-loader --save-dev
然后更新webpack.config.js
const HtmlWebPackPlugin = require("html-webpack-plugin");
module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.html$/,
use: [
{
loader: "html-loader",
options: { minimize: true }
}
]
}
]
},
plugins: [
new HtmlWebPackPlugin({
template: "./src/index.html",
filename: "./index.html"
})
]
};
抽离出CSS作为独立文件
以前是extract-text-webpack-plugin，这个现在只有beta版兼容webpack4，须通过cnpm -i extract-text-webpack-plugin@next来安装
这里推荐用min-css-extract-plugin，首先还是安装
npm i mini-css-extract-plugin css-loader --save-dev
然后创建CSS文件
/* */
/* CREATE THIS FILE IN ./src/main.css */
/* */
body {
line-height: 2;
}
配置plugin和loader
const HtmlWebPackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.html$/,
use: [
{
loader: "html-loader",
options: { minimize: true }
}
]
},
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, "css-loader"]
}
]
},
plugins: [
new HtmlWebPackPlugin({
template: "./src/index.html",
filename: "./index.html"
}),
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "[id].css"
})
]
};
在入口文件加引入css
//
// PATH OF THIS FILE: ./src/index.js
//
import style from "./main.css";
最后通过npm run build构建
webpack dev server
npm i webpack-dev-server --save-dev
"scripts": {
"start": "webpack-dev-server --mode development --open",
"build": "webpack --mode production"
}
npm run start
