var HtmlWebpackPlugin = require("html-webpack-plugin");
var config = {
entry: {
main: "./src/main.js",
},
output: {
path: __dirname + "/dist",
filename: "[name]-min.js"
},
module: {
rules: [
{
test: /.css/,
loader: [
"style-loader",
"css-loader",
"postcss-loader",
"less-loader"
]
},
// {
// test: /.(png|jpe?g|gif)
/,
use: [
{
loader: 'url-loader',
options: {
limit: 8192 // 单位时b
}
}
]
},
{
test: /.js$/,
use: [
{
loader: "babel-loader",
}
],
include: __dirname + "/src",
exclude: __dirname + "/node_module"
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: "./index.html",
filename: "demo1.html",
inject: "body",
// chunks: ["b"]
})
]
};
module.exports = config;
html-webpack-plugin
npm i html-webpack-plugin
用来生成html文件的,会默认将压缩的js文件用script引入到页面
template:生成html用的模板 filename:生成的html的名字 inject：script标签放置的位置(放在body里面还是head标签里面)
loader(打包样式就要有loader)
css需要安装的loader:npm i style-loader css-loader --save-dev
postcss-loader(把所有不兼容的css3加前缀,兼容的)
npm i postcss-loader --save-dev(需要添加配置文件postcss.config.js)
处理兼容autoprefixer(例如给display:flex增加前缀的)
npm i autoprefixer --save-dev
如果项目中用的是less，要用less-loader,less-loader依赖于less,要下载less
npm i less less-loader --save-dev
处理图片的文件png,jpg,jpeg,gif
npm i url-loader --save-dev或者npm i file-loader --save-dev都可以处理图片 { loader:'url-loader', options:{//options是参数 limit:8192 } }
babel
npm i babel-loader --save-dev(8版本要依赖npm i @babel/core --save-dev)
babel安装完包还要在根目录配置.babelrc文件
es2015是es6
处理es6
- .bablerc中的数组中的"es2015"的安装包是bable-preset-es2015
- .bablerc中的数组中的"stage-2"的安装包是babel-preset-stage-2
webpack rules
include 规则处理的文件范围 exclude 排除范围
webpack-dev-server(装完会起服务,会把html和js打包,会打包的内容缓存起来,改一下,就会被监听到,不是真的打包到dist里面,开发的时候用)
npm i webpack-dev-server --save-dev
