1 | # Almost 零配置生成构建项目需要的webpack配置,方便快速启动项目。
|
2 | 预置了开发和生产环境当中大部分的内容,安装即用
|
3 |
|
4 | ## 应用
|
5 |
|
6 | ```bash
|
7 | yarn add @talentui/webpack-config webpack webpack-cli webpack-dev-server --dev
|
8 | //或者
|
9 | npm install @talentui/webpack-config webpack webpack-cli webpack-dev-server -D
|
10 | ```
|
11 |
|
12 | 如果你在项目当中要转换sass,需要执行安装
|
13 | ```
|
14 | npm install node-sass sass-loader -D
|
15 | ```
|
16 |
|
17 | 如果你打算在项目中转换less文件,需要安装
|
18 |
|
19 | ```
|
20 | npm install less-loader -D
|
21 | ```
|
22 |
|
23 | 在你的项目中创建webpack/webpack.config.js
|
24 | ```js
|
25 | const path = require('path');
|
26 |
|
27 | module.exports = require('@talentui/webpack-config')({
|
28 | //项目目录根节点路径
|
29 | 'root': path.resolve(__dirname, '../'),
|
30 |
|
31 | //入口文件
|
32 | 'entry': "./src/entry.js",
|
33 |
|
34 | //devserver的端口
|
35 | 'port': 3000,
|
36 |
|
37 | //devServer的host
|
38 | 'host': "127.0.0.1",
|
39 | /*
|
40 | dll列表,在你的应用中可以通过引入dll的方式引入一些共用的代码,
|
41 | 支持字符串和{file, manifest}格式的对象
|
42 | 如果是字符串,代表这个dll是基于@talentui/dll-webpack-config打包的dll,这样@talentui/webpack-config可以自动解析路径
|
43 | 如果是自定义打包的,需要以对象的方式传递manifest和file
|
44 | */
|
45 | 'dllList': ['@beisen/talent-ui-dll',{
|
46 | manifest: '@beisen/talent-ui-dll/build/manifest.dev.json',
|
47 | file: '@beisen/talent-ui-dll/build/talent-ui-dll.dev.js'
|
48 | }],
|
49 | /*
|
50 | 公共资源路径,和webpack中的会影响到outpub.publicPath
|
51 | */
|
52 | "publicPath": "" ,
|
53 | // 指定本地开发环境的承载页,默认认为@talentui/webpack-config提供的,提供的挂载点为bsMain
|
54 | 'hostPage': path.resolve(__dirname, '../index.html')
|
55 |
|
56 | // Array<string> | string 浏览器支持列表, 这个会影响你代码打包的速度和文件体积,支持的越新越好
|
57 | // replaced by tragetBrwosers: browsers: ["> 1%", "chrome >= 57"], removed from 2017.6.27 replacedBy targetBrowsers, 详情请查看浏览器列表 https://github.com/ai/browserslist
|
58 | // 如果不配置以下这两个选项,默认就是chrome > 55
|
59 | //Object, 使用targets配置会覆盖targetBrowsers, 当你需要更明确的配置的时候,可以使用此配置项,配置方式请查看文档 https://github.com/babel/babel-preset-env#targets
|
60 | 'targets': {},
|
61 |
|
62 | //模块查找目录
|
63 | //removed from 2.0 'moduleDirectories': [path.resolve(appRoot, './src'), 'node_modules' ]
|
64 |
|
65 | // 设置模块的scope,默认为项目根目录,设置为"./src", 代表设置模块只能在项目根目录下的src目录范围内使用相对路径查找模块
|
66 | "moduleScope": "."
|
67 | // 设置别名,自己想像能干些什么吧。默认值为{"&": moduleScope}
|
68 | 'alias': {
|
69 | "_": appRoot, //项目根目录
|
70 | "&": moduleScope,
|
71 |
|
72 | },
|
73 |
|
74 | //是否使用commonChunk, 默认为true, 你可以使用这个来禁用commonchunk
|
75 | 'useCommonChunk': false, //
|
76 |
|
77 | //Array<string> 对js进行babel转换时需要包含或者不包含的我,支持 BabelPlugins和env的一些内置方法 你可以看这里 https://github.com/babel/babel-preset-env#include
|
78 | 'transformInclude': [],
|
79 | 'engines': ['react' ,'vue'] //可选参数不传默认为['react'], 可以是react或者vue中的一个或者多个。
|
80 | // 设置程序使用的语言,支持ts(typescript), js(typescript), mixed(typescript 和 javascript)。这会影响到项目支持的扩展名和使用的loader
|
81 | 'language': "js",
|
82 | // 在构建时是否启用lint检查,默认为false,为true时需要提供相应的.eslintrc和.tslintrc文件
|
83 | 'useLint': false
|
84 |
|
85 | // 扩展plugins的支持方法
|
86 | "applyPlugins": (plugins) => {
|
87 | let plugin = new OtherPlugin(options);
|
88 | return plugins.concat(plugin);
|
89 | },
|
90 | // rules的扩展方法
|
91 | "applyRules": (rules) => {
|
92 | let rule = new OtherRule(options);
|
93 | return rules.concat(rule)
|
94 | },
|
95 | projectType: 'spa' || 'mpa' || 'module', //根据项目的类型区别项目构建方式
|
96 | //definePlugin的配置
|
97 | define: {
|
98 | 'process.env.NODE_ENV': JSON.stringingfy('production')
|
99 | },
|
100 | //是否抽离样式文件 默认为true
|
101 | extractStyles: true,
|
102 | //用来配置babel-plugin-env的Modules参数,转换模块的类型,umd, commonjs, amd, 默认为false, 不转换
|
103 | transModule: false,
|
104 | //是否启用css模块化,只支持.css文件, 如果想扩展其他,请contrib
|
105 | cssModules: false,
|
106 | externals: {}, //webpack的externals参数,
|
107 | jsLibs: [], //插入到承载页的js库
|
108 | })
|
109 | ```
|
110 |
|
111 |
|
112 | ## NODE 环境变量设置
|
113 | @talentui/webpack-config会根据你运行时的变量来决定应用哪些配置,会影响到这些配置的环境变量有。
|
114 | > `asset_path`: 这个变量会影响到你构建代码时所设置的[publicPath](https://webpack.js.org/configuration/output/#output-publicpath), 因为在生产环境下我们使用了extractTextPlugin来拆分样式代码,所以运行时更改publicPath不太现实,所以我们只能为不同的环境构建不同的结果。
|
115 |
|
116 | > `dev_server=on` 通过webpack config生成webpack配置对象的时候,很难直接通过环境信息来确定是否启动了dev server, 通过观察process中的数据,发现通过process.mainModule来判断是否是通过webpack-dev-server做为启动模块,普通情况下是可靠的。如果你使用了其他的启动方式,这个时候你需要传递这个环境变量,明确告诉应用启动了webpack-dev-server. 并且加载dev-server模式下需要的配置和插件,如htmlwebpackpulugin和addassethtmlplugin等插件。
|
117 |
|
118 | > `analysis=on` 如果设置这个的话就会启动webpack bundle analyzer, 提供一个可视化的图表。如图:
|
119 | <img src="https://raw.githubusercontent.com/imlgm/tupian/master/2017/analyzer.png" style="width:600px" />
|
120 |
|
121 | > NODE_ENV=production 会启动生产环境的打包
|
122 |
|
123 | > `friendly=off` 项目默认引入了friendly-error-plugins,因为这样会影响终端的输出,你如果想看到全部的输出,可以设置这个环境变量
|
124 |
|
125 | > `check=on` 受文件系统的影响,在mac下进行开发,`import './Index.js'` 和 `import './index.js'` 是等价,但在linux文件系统下,却会报错,如果你的项目在linux下运行报错,可以使用这个环境变量打开 `case-sensitive-webpack-plugin`, 这样会对模块的大小写进行检查,如果导入的路径大小写不对,就会报错。为什么不始终打开呢?首先,这样的错误不是频繁出现的,linux下打开也没啥用,其次,减少项目引入的plugins的数量,尽可能的提升打包的速度。
|
126 |
|
127 |
|
128 | ### 关于webpack中对dll的使用请参看[DllPLugin](https://webpack.js.org/plugins/dll-plugin/)
|
129 |
|
130 | ### Dll 列表
|
131 |
|
132 | * [@talentui/dll-react](https://www.npmjs.com/package/@talentui/dll-react)
|
133 | * [talent-ui-dll-preact](https://www.npmjs.com/package/@beisen/talent-ui-dll-preact)
|
134 |
|
135 | ### 生成dll的工具:
|
136 |
|
137 | * [@talentui/dll-webpack-config](https://www.npmjs.com/package/@talentui/dll-webpack-config)
|
138 |
|