详解webpack 入门总结和实践(按需异步加载，css单独打包，生成多个入口文件)

new webpack.optimize.UglifyJsPlugin({
  compress: {
    warnings: false
  }
})

entry: {
  app: path.resolve(APP_PATH, 'index.js'),
  //添加要打包在vendeors里面的库
  vendors: ['jquery', 'moment']
},
plugins: {
   //把入口文件里面的数组打包成vendors.js
  new webpack.optimize.CommonsChunkPlugin('vendors', 'vendors.js'),
}

npm install extract-text-webpack-plugin –save-dev

// 引入css 单独打包插件
var ExtractTextPlugin = require("extract-text-webpack-plugin");
// 设置生成css 的路径和文件名，会自动将对应entry入口js文件中引入的CSS抽出成单独的文件
var packCSS = new ExtractTextPlugin('./css/[name].min.css'); 

 plugins: [
  packCSS
 ]

 require('./css/plan.css');

 npm install css-loader style-loader --save-dev

 module: {
   loaders: [
    { 
     test: /\.css$/,
     loaders: ['style', 'css'],
     include: APP_PATH
    }
   ]
 }

npm install url-loader --save-dev

{
  test: /\.(png|jpg)$/,
  loader: 'url"htmlcode">

  entry: {
    creative: './src/static/js/apps/idea.js',
    plan: './src/static/js/apps/plan.js',
  },
  output: {
    path: 'dist/',
    filename: 'js/[name].min.js'
  }


更新
代码切分以及异步加载
今天遇到的问题是，我做的一个页面是要分为四个步骤，每个步骤在进入下一步的时候需要对下一步的内容进行接口请求，页面渲染和事件绑定等操作。
之前的做法
拆分了各个步骤对应模块之后，我通过commonJS的方式在入口文件开头引入了各个模块


这时候是这样的


  var stepOne = require('./mods/stepone.js');
  var steptwo = require('./mods/steptwo.js');
  ...

  // 使用的时候
  stepone.checkOne();



这种做法，因为commonJS 的同步加载机制，会导致入口文件打包之后非常臃肿。在首屏，用到用不到处理代码的都会在一开始就加载，严重影响了首屏加载时间。
代码切分之后
我利用webpack的code splitting 特性，将各个步骤的代码进行拆分，实现按需加载。这里主要利用了 webpack 的 require.ensure 函数实现的。非常方便，只需要把异步加载的代码，放到 require.ensure 里面的回调函数就可以实现：


  require.ensure(['./mods/stepone.js'], function(){
    var stepone = require('./mods/stepone.js');
    stepone.checkone();
  }, 'stepone'); // 第三个参数设置打包名称


这样设置，webpack 就会单独生成拆分的文件，我们还需要设置拆分文件的名字和路径。这里我费了一番周折。
webpack 默认给拆分的文件用数字命名，如果我们自己不进行设置，会得到 1.min.js 这样类似的文件。我们可以在 webpack.config.js 中，通过 output.chunkFilename 来设置分块生成文件的名称，分块的路径可以通过 output.publicPath 设置。这里一定要设置 publicPath，不然得到的路径有可能不是我们上线打包的路径。具体我的设置如下:


  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'js/apps/[name].min.js',
    publicPath: '/dist/', // 设置require.ensure路径
    chunkFilename: 'js/apps/[name].min.js' // 设置require.ensure 文件名
  }


总结
webpack 使用起来感觉非常新颖，也容易入手！今天总结的多是入门的内容，后续还要继续使用~
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。