webpack2
less-loader
安装npm install --save-dev less-loader less
postcss-loader
安装npm i -D postcss-loader autoprefixer
建文件poctcss.config.js
const autoprefixer = require("autoprefixer");
module.exports = {
plugins: [autoprefixer({
//last 2 versions兼容最近的两个版本,>1%指全球浏览器的市场份额大于1%
overrideBrowserslist: ["last 2 versions", ">1%"],
})],
}
file-loader(处理静态资源模块)
原理是把打包入口中识别出的资源模块,移动到输出目录,并且返回一个地址名称
场景:就是当我们需要模块,仅仅是从源代码挪移到打包⽬目录, 就可以使⽤用file-loader来处理理,txt,svg,csv,excel,图⽚片资 源啦等等
安装npm install --save-dev file-loader
再index.js 中代码
import pic from "../images/01.png";
// console.log(add(2, 3))
var img = new Image();
img.src = pic;
var root = document.getElementById("root");
root.appendChild(img);
再webpack.config.js中
{
test: /\.png$/,
use: {
loader: "file-loader",
options: {
// [ext]老资源模块的后缀
name: "[name]_[hash:6].[ext]",
//把图片放到dist目录下的images
outputPath: "images/"
}
}
},
url-loader file-loader加强版本(包含file-loader全部功能)
安装:npm install url-loader -D
HtmlWebpackPlugin
htmlwebpackplugin会在打包结束后自动生成一个html文件,并把打包生成的js模块引入到该html种中。
安装npm install --save-dev html-webpack-plugin
引入并且运用
const HtmlWebpackPlugin = require("html-webpack-plugin")
new HtmlWebpackPlugin({
//模板文件路径,支持加载器
template: "./src/index.html",
//输出的html名,默认是index.html。也可以直接配置带有子目录
filename: "index.html",
})
devtool(默认开启,精确定义错误信息)
若要关闭,可配置
devtool:"none"
生产环境不建议开启sourse-map,开发环境默认开启
eva:速度最快,使用eva包裹模块代
sourse-map:产生.map文件
cheap:较快,不含列信息
Module:第三方模块,包含loader的sourcemap(比如jsx to js , babel的sourcemap)
inline: 将.map作为DataURI嵌入,不单独生成.map文件
WebpackDevServer(提高速率)
转到内存里执行了,提高速率
1,安装 npm install webpack-dev-server -D
2,再package.json中的script标签中加入
"scripts": {
"dev": "webpack-dev-server"
},
3,执行npm run dev
4,再webpack.config.ja中配置
devServer:{
//设置服务器访问路径,也可以是相对路径
contentBase:path.resolve(__dirname,"./dist"),
//自动打开浏览器窗口
open:true,
post:8080
},