webpack
- webpack 支持es6 import export ，开箱机用，但是要使用es6的其他的特性，需要在babel中进行配置
- style-loader, css-loader 打包的css文件会在<style></style>中生成
- plugins :
html-webpack-plugin
自动生成新的index.html文件
clean-webpack-plugin
清除dist目录内容
WebpackManifestPlugin webpack
能够对「你的模块映射到输出 bundle 的过程」保持追踪 -
npm install --save-dev webpack-dev-server
webpack-dev-server 为你提供了一个简单的 web 服务器，并且能够实时重新加载(live reloading)。如果现在修改和保存任意源文件，web 服务器就会自动重新加载编译后的代码 - 使用
webpack-dev-middleware
webpack-dev-middleware 是一个中间件容器(wrapper)，它将通过 webpack 处理后的文件发布到一个服务器(server)。 - 模块热替换 它允许在运行时更新各种模块，而无需进行完全刷新.
const webpack = require(‘webpack');
new webpack.NamedModulesPlugin(),
new webpack.HotModuleReplacementPlugin()
-
npm i --save-dev uglifyjs-webpack-plugin
能够删除未引用代码(dead code)的压缩工具(minifier) - UglifyJSPlugin
source-map
new UglifyJSPlugin({
sourceMap: true
}),
-
npm install --save-dev webpack-merge
merge(base, dev) - 指定环境
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('production')
})
CommonsChunkPlugin 来移除chunks中重复的模块。
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
}
},
{
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')
},
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",
- psotcss
`npm 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']
})
]
}
npm install --save-dev babel-core babel-loader babel-preset-es2015
{
test: /\.js$/,
use:['babel-loader'],
exclude: "/node_modules"
}
.baselrc
{
"presets": [
"es2015"
]
}
- externals
防止将某些 import 的包(package)打包到 bundle 中，而是在运行时(runtime)再去从外部获取这些扩展依赖(external dependencies)。
例如，从 CDN 引入 jQuery，而不是把它打包：
index.html
<script
src="https://code.jquery.com/jquery-3.1.0.js"
integrity="sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk="
crossorigin="anonymous">
</script>
webpack.config.js
externals: {
jquery: 'jQuery'
}
这样就剥离了那些不需要改动的依赖模块，换句话，下面展示的代码还可以正常运行：
import $ from 'jquery';
$('.my-element').animate(...);
github:webpack-demo
