webpack
1.webpack 支持es6 import export ，開箱機用，但是要使用es6的其他的特性，需要在babel中進行配置
2 style-loader, css-loader 打包的css文件會在<style></style>中生成
3. plugins :
html-webpack-plugin
自動生成新的index.html文件
clean-webpack-plugin
清除dist目錄內容
WebpackManifestPlugin webpack
能夠對「你的模塊映射到輸出 bundle 的過程」保持追蹤
4. npm install --save-dev webpack-dev-server
webpack-dev-server 為你提供了一個簡單的 web 服務器，
并且能夠實時重新加載(live reloading)。
如果現在修改和保存任意源文件，web 服務器就會自動重新加載編譯后的代碼
5.使用 webpack-dev-middleware
webpack-dev-middleware 是一個中間件容器(wrapper)，它將通過 webpack 處理后的文件發布到一個服務器(server)。
6.模塊熱替換 它允許在運行時更新各種模塊，而無需進行完全刷新.
const webpack = require(‘webpack');
new webpack.NamedModulesPlugin(),
new webpack.HotModuleReplacementPlugin()
7. npm i --save-dev uglifyjs-webpack-plugin
能夠刪除未引用代碼(dead code)的壓縮工具(minifier) - UglifyJSPlugin
source-map
```
new UglifyJSPlugin({
sourceMap: true
}),
```
8. npm install --save-dev webpack-merge
merge(base, dev)
9 指定環境
```
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('production')
})
```
10 CommonsChunkPlugin 來移除chunks中重復的模塊。
11
```.resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
}
},
```
12.
```
{
test: /\.(png|svg|jpg|gif)$/,
loader: 'file-loader',
options:{
limit:10000,
name:'img/[name].[hash].[ext]'
}
}
output: {
filename: 'js/[name].[hash].bundle.js',
path: path.resolve(__dirname, 'dist')
},
```
13 npm install --save-dev extract-text-webpack-plugin
```
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
}),
exclude:"/node_modules"
},
new ExtractTextPlugin({
filename:"css/[name].[contenthash].css",
allChunks:true
}),
```
幾個入口文件 幾個css
css 壓縮 use: ["css-loader?importLoaders=1&&minimize",
14 psotcss
nam i psotcss-loader autoprefixer -D
webpack
```
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: ["css-loader?importLoaders=1","postcss-loader"]
}),
exclude:"/node_modules"
},
```
使用@import引入時無法加上前綴 使用?importLoaders=1來hack
posts.config.js
```
module.exports = {
plugins: [
require('autoprefixer')({
browsers: ['last 5 versions']
})
]
}
```
15 npm install --save-dev babel-core babel-loader babel-preset-es2015
```
{
test: /\.js$/,
use:['babel-loader'],
exclude: "/node_modules"
}
.baselrc
{
"presets": [
"es2015"
]
}
```
|
