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
- webpack的基本配置
- webpack react的基本配置
- 二、webpack的基本配置(1)
- 二、webpack的基本配置(2)
- webpack的基本配置项详解
- webpack基本配置
- webpack-2-基本配置
- webpack基本配置
- webpack基本配置
- webpack基本配置
- webpack安装与基本配置
- webpack基本配置项总结
- webpack基本打包配置流程
- webpack的基本使用
- webpack的基本使用
- webpack的基本介绍
- webpack环境的配置
- webpack简单的配置
- 95. Unique Binary Search Trees II(unsolved)
- |BZOJ 3211|树状数组|并查集|花神游历各国
- springboot-restTemplate
- ScrollView与百度地图的焦点争夺大战即将展开
- Idea2016配置并破解jrebel
- webpack的基本配置
- 干货 | 教你打造一款颜值逆天的VS Code
- 【一周任务】JMS学习任务20170225
- myeclipse快捷键大全
- Windows SDK 10586 安装图
- Java求一个整数的二进制中1的个数
- Sinc滤波器
- Excel信息提取
- 再谈Android AsyncTask的优缺点