什么是webpack
webpack是一個(gè)前端工具验毡，可以讓各個(gè)模塊進(jìn)行加載衡创，預(yù)處理，在進(jìn)行打包晶通。
安裝和配置
- 通過全局安裝webpack
npm run -g webpack
安裝完成后璃氢，在我們的C盤就會(huì)生成一個(gè)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 是頁面中的入口文件，比如我這邊的入口文件時(shí)main.js
- output: 是指頁面通過webpack打包后生成的目標(biāo)文件放在什么地方去喉脖，其中的path是打包文件存放的絕對(duì)路勁塘秦。filename是打包后的文件名，publicPath是網(wǎng)站運(yùn)行時(shí)的訪問路徑
- resolve: 定義了解析模塊路徑時(shí)的配置动看，常用的就是extensions; 可以用來指定模塊的后綴尊剔，這樣在引入模塊時(shí)就不需要寫后綴，會(huì)自動(dòng)補(bǔ)全菱皆。
- plugins: 定義了需要使用的插件须误，比如commonsPlugin在打包多個(gè)入口文件時(shí)會(huì)提取公用的部分，生成common.js;
- module.rules:是文件的加載器仇轻，比如scss-loader,url-loader,css-loader等加載器京痢；所以在這之前，我們要把這些加載器通過命令引入到我們項(xiàng)目上篷店，比如：
npm install scss-loader --save-dev
npm install style-loader --save-dev
等等祭椰，必須要把所有的加載器都引入項(xiàng)目中，不然會(huì)報(bào)錯(cuò)
其中test是正則表達(dá)式疲陕，對(duì)符合的文件名使用相應(yīng)的加載器方淤。
babel-loader加載器恩能夠?qū)S6的代碼轉(zhuǎn)換成ES5代碼，遮掩給我們就可以使用ES6了蹄殃。首先我們要安裝babel-loader:
npm install babel-loader --asve-dev
安裝成功后携茂，在跟目錄node_modules會(huì)生成文件：babel-coreh和babel-loader;
webpack 的命令
- webpack //啟用webpack的方法
- webpack -w //提供watch方法，實(shí)時(shí)進(jìn)行打 包更新
- webpack -p //對(duì)打包后的文件進(jìn)行壓縮
- webpack -d //提供source map 诅岩，方便調(diào)試代碼
