初识webpack3
安装webpack3。
基础命令
- 打包js文件
webpack src/xxx.js dist/xxx.bundle.js
- 监听文件变化
webpack src/xxx.js dist/xxx.bundle.js --watch
- 压缩文件
webpack src/xxx dist/xxx.bundle.js -p
配置文件
webpack.config.js
1. 基础配置
module.exports = {
entry: './src/app.js',
output: {
filename: './dist/app.bundle.js'
}
};
entry:源文件
output:输出的文件目标
在终端直接输入webpack会自动去寻找webpack.config.js的文件并读取
2. 插件 html-webpack-plugin
该插件将为你生成一个HTML5文件,其中包含webpack 使用script标记的正文中的所有包,只需将插件添加到webpack 配置中。
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry: 'app.js',
output: {
path: __dirname + '/dist',
filename: 'app.bundle.js'
},
plugins: [
new HtmlWebpackPlugin({
title: 'webpack custom 666',
template: './src/index.html'
})
]
}
title:生成html文件的title
template:html模板文件路径
常用的属性还有minify(压缩简化html文件),hash(为引入的css和js添加哈希标识)等。
3. 处理css文件css-loader
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
},
],
},
};
css-loader:用来处理css样式,例如把css中类似@import()或者url()这样的引用资源进行引入或者处理。
style-loader:将所有处理好的css样式以行内元素style标签的格式动态注入到界面的head标签中去。
loader的解析顺序是从右往左,所以应该先加载css-loader,应该将css-loader放在最右边
scss文件加载与之相似,不过要增加scss的加载器。
若要将css文件打包成独立文件,则使用插件extract-text-webpack-plugin(此插件是适用webpack1,2,3)
const ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
}
]
},
plugins: [
new ExtractTextPlugin("styles.css"),
]
}
4. 插件webpack-dev-server
在文件改变时实时加载(安装时注意版本兼容)
“webpack”: “^3.8.1”,
“webpack-dev-server”: “^2.9.7”
亲测兼容
"scripts": {
"start:dev": "webpack-dev-server"
}
修改webpack-dev-server的配置devServer
var path = require('path');
module.exports = {
//...
devServer: {
contentBase: path.join(__dirname, 'dist'),
compress: true,
port: 9000
}
};
scripts配置,浏览器自动运行脚本
"scripts": {
"start": "webpack-dev-server --open",
},
5.加载图片文件file-loader和url-loader
file-loader:将项目中使用的图片当做文件进行打包,最终生成引用路径。
url-loader:用法与file-loader一致,只是新增了 limit 限制,将小于 limit 限制的图片转化为base64在项目中使用,当大于 limit 限制时跟file-loader一样当做文件打包并使用路径引用。
*注:文件引用配置中都会关系到 outputPath 和 publicPath 详细关系
publicPath :用来指定打包生成后的css或者url引用中路径的配置,也就是说pulicPath针对的是路径,并不是文件本身。
outputPath:用来配置打包生成的文件输出的位置,它针对的是文件存储的位置,和代码中的路径引用无关。
https://www.imooc.com/article/21835
此篇文章将两者关系介绍的很清楚。