html-webpack-plugin和loader

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

1. .bablerc中的数组中的"es2015"的安装包是bable-preset-es2015
2. .bablerc中的数组中的"stage-2"的安装包是babel-preset-stage-2

webpack rules

include 规则处理的文件范围 exclude 排除范围

webpack-dev-server(装完会起服务,会把html和js打包,会打包的内容缓存起来,改一下,就会被监听到,不是真的打包到dist里面,开发的时候用)

npm i webpack-dev-server --save-dev

转载于:https://juejin.im/post/5c963bc8f265da61061484e6