webpack 的使用

什么是webpack

webpack是一个前端工具，可以让各个模块进行加载，预处理，在进行打包。

安装和配置

1. 通过全局安装webpack

npm run -g webpack

安装完成后，在我们的C盘就会生成一个node_modules文件夹，里面包含了webpack，这样我们就可以使用webpack命令了

module.exports = {
entry: {
app: './src/main.js'
},
output: {
path: config.build.assetsRoot,
filename: '[name].js',
publicPath: process.env.NODE_ENV === 'production'
? config.build.assetsPublicPath
: config.dev.assetsPublicPath
},
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'src': path.resolve('src'),
'assets': path.resolve('src/assets'),
'scss': path.resolve('src/scss'),
'router': path.resolve('src/router'),
'config': path.resolve('src/config'),
'directives': path.resolve('src/directives'),
'vuex_': path.resolve('src/vuex_'),
'utils': path.resolve('src/utils'),
'plugins': path.resolve('src/plugins'),
'components': path.resolve('src/components')
}
},
plugins: []，
module: {
rules: [
{
test: /.vue$/,
loader: 'vue-loader',
options: vueLoaderConfig
},
{
test: /.js$/,
loader: 'babel-loader',
include: [resolve('src'), resolve('test')],
exclude: /node_modules/
},
{
test: /.scss$/,
loader: 'style!css!sass?sourceMap',
include: [resolve('scss')],
exclude: /node_modules/
},
{
test: /.less$/,
loader: 'style!css!less',
include: [resolve('less')],
exclude: /node_modules/
},
{test: /iview.src.?js$/, loader: 'babel-loader'},
{test: /vue-blu.src.?js$/, loader: 'babel-loader'},
{test: /froala-editor.js.?js$/, loader: 'babel-loader'},
{test: /vue-preview.src.?js$/, loader: 'babel-loader'},
{
test: /.(png|jpe?g|gif|svg)(?.)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
{
test: /.(woff2?|eot|ttf|otf)(?.)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
}
]
}
}

• entry 是页面中的入口文件，比如我这边的入口文件时main.js
• output: 是指页面通过webpack打包后生成的目标文件放在什么地方去，其中的path是打包文件存放的绝对路劲。filename是打包后的文件名，publicPath是网站运行时的访问路径
• resolve: 定义了解析模块路径时的配置，常用的就是extensions; 可以用来指定模块的后缀，这样在引入模块时就不需要写后缀，会自动补全。
• plugins: 定义了需要使用的插件，比如commonsPlugin在打包多个入口文件时会提取公用的部分，生成common.js;
• module.rules:是文件的加载器，比如scss-loader,url-loader,css-loader等加载器；所以在这之前，我们要把这些加载器通过命令引入到我们项目上，比如：

npm install scss-loader --save-dev
npm install style-loader --save-dev

等等，必须要把所有的加载器都引入项目中，不然会报错
其中test是正则表达式，对符合的文件名使用相应的加载器。
babel-loader加载器恩能够将ES6的代码转换成ES5代码，遮掩给我们就可以使用ES6了。首先我们要安装babel-loader:

npm install babel-loader --asve-dev

安装成功后，在跟目录node_modules会生成文件：babel-coreh和babel-loader;

webpack 的命令

1. webpack //启用webpack的方法
2. webpack -w //提供watch方法，实时进行打 包更新
3. webpack -p //对打包后的文件进行压缩
4. webpack -d //提供source map ，方便调试代码