Webpack
webpack官方中文文档戳这里
Webpack
的基本结构:-
entry
: 默认值是./src/index.js,
是用来告诉工具, 应该从那里进入.-
单个文件入口:
entry: './path/to/my/entry/file.js'
-
多个文件入口:
entry: { pageOne: './src/pageOne/index.js', pageTwo: './src/pageTwo/index.js', pageThree: './src/pageThree/index.js' }
-
-
output
: 输出文件的默认值是./dist/main.js
, 用来告诉工具, 打包好了的bundle放在哪里.-
单个入口文件:
output: { filename: 'bundle.js', }
-
多个入口文件:
entry: { app: './src/app.js', search: './src/search.js' }, output: { filename: '[name].js', path: __dirname + '/dist' } // 写入到硬盘:./dist/app.js, ./dist/search.js
-
-
module
-
loader
:webpack
只能处理js
和json
文件, 其他文件需要使用loader
来帮忙处理.test
: 用于标识出应该被对应的loader
进行转换的某个或某些文件.use
: 表示进行转换时,应该使用哪个loader
.
-
你可以使用 loader 告诉 webpack 加载 CSS 文件,或者将 TypeScript 转为 JavaScript。为此,首先安装相对应的 loader:
// loader 的使用, 是从后往前的, 在后一个loader处理结束后, 返回给前一个. module.exports = { module: { rules: [ { test: /\.css$/, use: [ { loader: 'style-loader' }, { loader: 'css-loader', options: { modules: true } }, { loader: 'sass-loader' } ] } ] } };
-
-
plugins
:loader
用于转换某些类型的模块,而插件则可以用于执行范围更广的任务。包括:打包优化,资源管理,注入环境变量 -
mode
: 通过选择development
,production
或none
之中的一个,来设置mode
参数,你可以启用webpack
内置在相应环境下的优化。其默认值为production
- 可能的值有:none, development 或 production(默认)。
-