webpack基础配置

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中重复的模块。

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')
},

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
    `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']
    })
  ]
}

15. npm install --save-dev babel-core babel-loader babel-preset-es2015

{
   test: /\.js$/,
     use:['babel-loader'],
        exclude: "/node_modules"
 }

.baselrc

{
 "presets": [
   "es2015" 
  ]
}

16. 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