1. 全局下载webpack
npm install webpack -g
2. 全局下载webpack-cli
npm install webpack-cli -g
3. 初始化项目
npm init
4. 在项目中使用webpack
npm install webpack -D
npm i -D html-webpack-plugin // 在dist 目录下生成bundle
npm -D为--save-dev的缩写
5. 新建webpack.config.js文件
const path = require(
'path');
// webpack用来自动生成和引入js的模块
const HtmlWebpackPlugin = require(
'html-webpack-plugin');
module.exports = {
// 环境为开发环境
mode:
'development',
// 入口
entry: {
aa:
'./src/components/app.js',
},
// 出口
output: {
path: path.resolve(__dirname,
'dist'),
filename:
'js/bundle.js'
},
// 模块
module: {
rules: [
{ // 处理.js结尾的文件,使用babel将es6,es7的语法转换成浏览器能识别的语法
test:
/\.js
$
/,
exclude: path.resolve(__dirname,
'node_modules'),
include: path.resolve(__dirname,
"src"),
use:
"babel-loader"
},
{ // 处理.css .less结尾的文件,需要下载yarn add css-loader style-loader less less-loader -D
// 注意使用less-loader一定要下载yarn add less -D。
// postcss-loader是webpack的loader模块的css后处理器,会适配浏览器,将实验室属性前面自动加上前缀
test:
/\.(css|
less)
$
/,
use: [
'style-loader',
{ loader:
'css-loader', options: { importLoaders:
1 } },
{
loader:
'postcss-loader',
options:{
ident:
'postcss',
plugins:[
require(
'autoprefixer')({
browsers:[
'last 5 versions']
})
]
}
},
'less-loader'
]
},
// 处理.html结尾的模板文件 yarn add html-loader -D
{
test:
/\.html
$
/,
use:
"html-loader"
},
// 处理图片资源 yarn add file-loader url-loader -D
{
test:
/\.(png|
jpe?
g|
gif|
svg)(\?.*
)?
$
/,
loader:
'file-loader',
query: {
limit:
10000,
name:
'assets/[name].[hash:5].[ext]'
}
}
]
},
plugins: [
new HtmlWebpackPlugin({
template:
'index.html', // 模板html
filename:
'index.html', // 输出的html
inject:
false,
minify: {
removeComments:
true, // 打包后的html文件去掉注释
collapseWhitespace:
true, //
打包后的html文件去掉空格
}
})
]
}
// 在根目录下新建.babelrc文件,里面是你要将js文件编译成es几