webpack 的使用

2017-09-11  本文已影响0人  this_smile

什么是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]')
}
}
]
}
}

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 ,方便调试代码
上一篇下一篇

猜你喜欢

热点阅读