const path = require('path')
const webpack = require('webpack')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
var htmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
entry: {
'index': './assets/js/index.es6'
},
output: {
// path:指定編譯的路徑
path: path.join(__dirname, './assets/'),
// publicPath:給每個編譯好的檔案,在html中前面加上同樣的路徑
publicPath: './',
filename: 'js/[name].bundle.js'
},
module: {
rules: [{
test: /\.es6$/,
use: [{
loader: 'babel-loader',
options: {
presets: [
['env', {
//關閉babel編譯es6,開啟treeShaking
modules: false
}],
]
}
}]
}, {
test: /\.less$/i,
use: ExtractTextPlugin.extract({
// fallback 所有的loader都失敗了,才呼叫這個
fallback: 'style-loader',
use: [{
loader: 'css-loader'
}, {
loader: 'less-loader'
}]
})
}]
},
// 放到cdn,就不需要打包進專案了
external:{
jquery:'window.$'
},
plugins: [
new ExtractTextPlugin("css/[name].css"),
//提取出公用程式碼
new webpack.optimize.CommonsChunkPlugin({
name: 'common',
minChunks: 2,
filename: 'js/[name].js'
}),
// 自動把靜態檔案插入html
new htmlWebpackPlugin({
filename: 'index.html',
template: './index.html',
inject: true
}),
// treeShaking 開啟壓縮,自動去除沒用到不需要的程式碼
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: true
},
output: {
comments: false
},
sourceMap: false
}),
// 把沒用的function幹掉了,程式碼看起來更好看
new webpack.optimize.ModuleConcatenationPlugin()
]
}
複製程式碼
webpack2-3基本配置
相關文章
- NGINX基本配置Nginx
- MySQL基本配置MySql
- git基本配置Git
- nginx基本配置使用Nginx
- RIP的基本配置
- Goldengate 基本配置Go
- vue基本指令與腳手架基本配置Vue
- TeamCity : Build 基本配置UI
- ASM基本配置問題ASM
- Nginx基本安裝配置Nginx
- vscode 基本配置VSCode
- vim配置及基本用法
- MFC 程式基本介面配置
- git 部署與基本配置使用Git
- Quill基本使用和配置 - DevUIUIdev
- NGINX的配置和基本使用Nginx
- GoldenGate的基本配置流程Go
- Android Studio - 基本配置Android
- 修改Linux的基本配置Linux
- (轉)Ubuntu網路卡基本配置Ubuntu
- VSFTPD的基本配置(轉)FTP
- H3C基本配置
- “微信公眾號-設定-基本配置”的配置
- Mantis基本配置及郵件伺服器配置伺服器
- samba 基本配置及自定義控制Samba
- Centos6防火牆基本配置CentOS防火牆
- c++基本配置屬性頁C++
- Mac 基本開發環境配置Mac開發環境
- 思科路由器基本配置命令路由器
- 交換機&路由器基本配置路由器
- 雲伺服器Ubuntu基本配置伺服器Ubuntu
- Cisco路由器基本配置命令路由器
- Nagios備忘之基本配置iOS
- 求助spring基本事物配置Spring
- 【MySQL】MHA的基本配置及註釋MySql
- nginx 基本命令和檔案配置Nginx
- ISIS 協議常用基本配置總結協議
- pycharm下載安裝與基本配置PyCharm