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"
]
}
```
|
QQ好友和群
QQ空间
腾讯微博
腾讯朋友
收藏
淘帖
顶
踩
