webpack安装
webpack安装
（先安装nodejs, NPM是随同NodeJS一起安装的包管理工具）
第一：进入项目文件夹，按shift键和鼠标右键，进入power shell窗口
第二：初始化，npm init -y
第三：本地安装，npm install webpack --save-dev （--save-dev
项目上线不需要的环境依赖，写入到 devDependencies 对象）
第四：安装插件babel-loader，npm install babel-loader babel-core -D，然后再安装npm install babel-preset-es2015 babel-plugin-transform-runtime -D。（-D是--save-dev的简写）
注：babel：语法转化器（只转化关键字）
babel-core：核心包
babel-loader：babel与webpack结合就使用babel-loader
babel-preset-es2015：提供预设（转化为ES5）
babel-plugin-transform-runtime：转化ES6函数
第五：安装css模块插件
npm install css-loader style-loader autoprefixer-loader -D
注：css-loader：核心包
style-loader：生成script标签并插入
autoprefixer-loader：添加前缀（解决兼容性问题）
第六：less模块（不需要可以不装，需要装）
npm install less less-loader -D
第七：配置webpack.config.js文件，放在.jason配置文件的同级目录下。
const path=require('path')
module.exports = {
// 打包main.js，打包后的文件输出到dist目录中，起名为build.js
entry: './src/main.js',
output: {
path: path.resolve(__dirname, './dist/'),
filename: 'build.js'
},
// 配置不同类型文件模块的加载
module: {
rules: [
// 配置css文件模块，让css-loader那css文件打包到js中，再用style-loader让样式生效
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
},
// 配置less文件模块
{
test: /\.less$/,
use: [
'style-loader',
'css-loader',
'less-loader'
]
},
// 配置解析es6为es5
{
test: /\.js$/,
use: [
{
loader: 'babel-loader',
options: {
// 配置要解析的语法规范
presets: ['es2015'],
// babel-loader的依赖，不引入部分es6代码可能会解析错误
plugins: ['transform-runtime']
}
}
],
// 排除掉这里的js模块，不然webpack解析他们，提高打包速度
exclude: /node_modules/
}
]
}
};
配置完以上之后可以直接执行webpack指令（新版的执行webpack指令后会提示你装webpack-cli，转完webpack-cli后，进入.bin文件夹下，power shell窗口执行webpack-cli命令。如果不想每次都进入.bin文件夹下也可以先把.bin的路径添加到系统的环境变量里，然后就可以进入项目文件夹里，进入power shell窗口执行webpack-cli命令。