webpack入门配置-及在项目中使用webpack
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几