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"
? ? ? ?? ?]
? ? ? ? }
```
