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基本配置
相關文章
- vscode 基本配置VSCode
- NGINX基本配置Nginx
- repmgr基本配置
- nginx基本配置使用Nginx
- RIP的基本配置
- TeamCity : Build 基本配置UI
- vue基本指令與腳手架基本配置Vue
- vim配置及基本用法
- MFC 程式基本介面配置
- ensp概念和基本配置
- centos7基本配置CentOS
- GoldenGate的基本配置流程Go
- vim基本配置與使用技巧
- OSPF多區域基本配置
- H3C基本配置
- git 部署與基本配置使用Git
- NGINX的配置和基本使用Nginx
- Quill基本使用和配置 - DevUIUIdev
- “微信公眾號-設定-基本配置”的配置
- Centos6防火牆基本配置CentOS防火牆
- samba 基本配置及自定義控制Samba
- Mac 基本開發環境配置Mac開發環境
- 阿里雲伺服器基本配置阿里伺服器
- c++基本配置屬性頁C++
- 思科路由器基本配置命令路由器
- OSPF的基本配置實驗(四)
- 02 eclipse中配置Web專案(含eclipse基本配置和Tomcat的配置)EclipseWebTomcat
- 交換機&路由器基本配置路由器
- 雲伺服器的基本配置:(一)伺服器
- 【MySQL】MHA的基本配置及註釋MySql
- ISIS 協議常用基本配置總結協議
- linux安裝配置與基本命令Linux
- docker 基本安裝配置操作(複習)Docker
- pycharm下載安裝與基本配置PyCharm
- nginx 基本命令和檔案配置Nginx
- Android Studio 配置目錄的建立和一些基本配置Android
- 使用rollup打包庫的一種基本配置
- 【運維】nginx伺服器基本配置指南運維Nginx伺服器