webpack的基本配置

来源:互联网 发布:阿提拉全面战争知乎 编辑:程序博客网 时间:2024/06/05 16:35

转眼春节之后已经快要开工一个月了,还记得春节期间给自己定下的一个小目标,在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的合并文件

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

//demo03entry:{  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配置的数组,上代码:

//demo04module:{  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  如果需要在a.js里面import b.js,而b.js 里面没有export 怎么办呢? 可以用resolve来解决。配置完resolve之后,直接在a.js里面 import B from ‘b’ 或者 import  ‘b’就可以了。上代码:

//demo05resolve:{  alias:{    b:'d:/test/..../app/src/b.js'  //这里需要配置绝对路径,key决定了import 时的名称  }}


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

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







0 0