什么是webpack
webpack是一個前端工具，可以讓各個模塊進(jìn)行加載，預(yù)處理，在進(jìn)行打包。
安裝和配置
- 通過全局安裝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打包后生成的目標(biāo)文件放在什么地方去，其中的path是打包文件存放的絕對路勁。filename是打包后的文件名，publicPath是網(wǎng)站運(yùn)行時的訪問路徑
- resolve: 定義了解析模塊路徑時的配置，常用的就是extensions; 可以用來指定模塊的后綴，這樣在引入模塊時就不需要寫后綴，會自動補(bǔ)全。
- 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是正則表達(dá)式，對符合的文件名使用相應(yīng)的加載器。
babel-loader加載器恩能夠?qū)S6的代碼轉(zhuǎn)換成ES5代碼，遮掩給我們就可以使用ES6了。首先我們要安裝babel-loader:
npm install babel-loader --asve-dev
安裝成功后，在跟目錄node_modules會生成文件：babel-coreh和babel-loader;
webpack 的命令
- webpack //啟用webpack的方法
- webpack -w //提供watch方法，實時進(jìn)行打 包更新
- webpack -p //對打包后的文件進(jìn)行壓縮
- webpack -d //提供source map ，方便調(diào)試代碼
