webpack是一个打包工具,一般一个js认为是一个模块,webpack默认只能识别js文件,如果要打包其他的如图片,txt,css等就需要使用loader。loader告诉webpack如何去打包对应的文件
样式loader:写css的方法有很多,less,scss,stylus最常见,每一种方法打包的时候需要3个loader,用stylus举例,它需要3个loader:stylus-loader css-loader stylus-loader,各自作用:
style-loader:把css挂在到dom上
css-loader:处理css
styus-loader:处理styus,转化为css
devtool:报错提示,可以很清楚的定位到错误行数以及该行内的第多少字符。开发环境建议用 cheap-module-eval-source-map ,报错可以定位到本地原始(打包之前)代码的文件以及行数,因为要准确定位到某个字符会消耗性能,所以建议定位到错误的行数就可以
热更新:
先安装 npm install webpack-dev-server -D
然后在package.json里面修改命令 "dev": "webpack-dev-server"
引入webpack const webpack = require("webpack"); // 为了使用hmr
添加配置项
devServer: {
contentBase: './dist',
hot: true,
hotOnly: true, // hmr不生效的时候也不让页面刷新
}
Plungin里面添加 new webpack.HotModuleReplacementPlugin()
入口文件更新:
if (module.hot) {
module.hot.accept(')// 利用这个方法来更新代码修改之后对应页面的修改
}