webpack的基本配置

转眼春节之后已经快要开工一个月了，还记得春节期间给自己定下的一个小目标，在2017年要学会react相关的技术。其实2016年我已经对react开发有所实践，但是总觉得似懂非懂。所以开了博客来梳理一下。我也是查看了很多大神的博客，慢慢摸索总结得出以下内容，不完善之处，恳请各位大神斧正。

工欲善其事，必先利其器。我先从webpack配置开始梳理。

首先当前项目目录结构是这样的：

-|app

-|src

-|a.js

-|b.js

-|dist

-|index.html

-|node_modules

-|...

-|package.json

-|webpack.config.js

webpack常见的配置，一般有entry、output、module、resolve、plugins五项。

1.entry用来配置入口文件。入口文件可以是对象的形式也可以是数组形式。两者的区别是数组形式的配置是将数组内所有的模块打包成一个js文件，对象形式的配置可以将对每个属性分别打包成一个js文件。

2.output用来配置输出文件，一般是path和filename属性，path配置输出文件路径，filename配置输出文件名称。

为了表述的更清晰，上代码：

//demo01 
entry:['./src/a.js','./src/b.js'],
output:{
  path:'./dist',
  filename:'main.js'
}
//此时dist里面main.js是src里面a.js和b.js的合并文件

//demo02
entry:{
  a:'./src/a.js',
  b:'./src/b.js'
},
output:{
  path:'./dist',
  filename:'[name].js'
}
//此时dist里面的a.js和b.js分别对应entry里面key为a和b输出的文件

//demo03
entry:{
  a:'./src/a.js',
  b:['./src/a.js','./src/b.js']
},
output:{
  path:'./dist',
  filename:'[name].js'
}
//此时dist里面的a.js和b.js分别对应entry里面key为a和b输出的文件，其中key为b输出的文件是a.js和b.js的合并文件

3.module 用来配置各种loaders，他的loaders属性是一个包含各项loader配置的数组，上代码：

//demo04
module:{
  loaders:[
    {
      test:/\.js$/, //匹配所有以.js结尾的js文件
      exclude:/node_modules/,//上面test不匹配node_modules文件夹里面的js文件，这里还有一个相对的设置 include，代表包含某个文件夹里面的文件
      loader:'babel-loader',//应用的loader，多个loader之间用!隔开
      query:{presets:['es2015','react']}
    }
  //...其他的loader也是类似这样配置
  ]
}

4.resolve 可以配置路径简写，也可以配置需要引用的包

//demo05
resolve:{
  alias:{
    @: 'd:/test/', //以后import 的时候可以用 @ 代替'd:/test/'
    b:'d:/test/..../app/src/b.js'  //这里需要配置绝对路径，key决定了import 时的名称
  }
}

5.plugins 配置各种插件项。上代码：

//demo06
import webpack from 'webpack';
let commonPlugin=new webpack.optimize.CommonsChunkPlugin('common.js');
module.exports={
  plugins:[commonPlugin],//插件new 出来之后，配置在这里的数组里面
}

猜你喜欢