Open du1wu2lzlz opened 6 years ago
entry
output
module
plugins
无论你是jsx,tsx,html,css,scss,less,png文件,webpack一视同仁为module。 并且每个文件[module]都会经过相同的编译工序 loader==> plugin。
Webpack 使用一个名为 webpack.config.js 的配置文件,要编译 JSX,先安装对应的 loader: npm install babel-loader --save-dev
npm install babel-loader --save-dev
假设我们在当前工程目录有一个入口文件 entry.js,React 组件放置在一个components/目录下,组件被 entry.js引用,要使用 entry.js,我们把这个文件指定输出到 dist/bundle.js, Webpack 配置如下:
entry.js
components/
dist/bundle.js
var path = require('path'); module.exports = { entry: './entry.js', output: { path: path.join(__dirname, '/dist'), filename: 'bundle.js' }, resolve: { extensions: ['', '.js', '.jsx'] }, module: { loaders: [ { test: /\.js|jsx$/, loaders: ['babel'] } ] } }
resolve指定可以被 import的文件后缀。比如 Hello.jsx这样的文件 就可以直接用 import Hello from 'Hello'引用。
resolve
import
Hello.jsx
import Hello from 'Hello'
loaders指定 babel-loader 编译后缀名为 .js 或者 .jsx 的文件, 这样你就可以在这两种类型的文件中自由使用 JSX 和 ES6 了。
loaders
babel-loader
按照官方文档的解释,如果我们想引用一个库,但是又不想让webpack打包,并且又不影响我们在程序中以CMD、AMD或者window/global全局等方式进行使用,那就可以通过配置externals。这个功能主要是用在创建一个库的时候用的,但是也可以在我们项目开发中充分使用。
假设:我们开发了一个自己的库,里面引用了lodash这个包,经过webpack打包的时候,发现如果把这个lodash包打入进去,打包文件就会非常大。那么我们就可以externals的方式引入。也就是说,自己的库本身不打包这个lodash,需要用户环境提供。
externals的配置有以下几种:array , object ,reg。这三种形式都可以传入,前者其实是对后者的包含。 参考(https://www.tangshuang.net/3343.html)
设置source编译方式
devtool : 'eval-source-map'
slashhuang关于webpack的理解
webpack核心
entry
: 定义整个编译过程的起点output
: 定义整个编译过程的终点module
: 定义模块module的处理方式 如: loadersplugins
: 对编译完成后的内容进行二度加工 CommonChunkPlugin 可以对代码进行分割一切皆模块
webpack基础配置
Webpack 使用一个名为 webpack.config.js 的配置文件,要编译 JSX,先安装对应的 loader:
npm install babel-loader --save-dev
假设我们在当前工程目录有一个入口文件
entry.js
,React 组件放置在一个components/
目录下,组件被entry.js
引用,要使用entry.js
,我们把这个文件指定输出到dist/bundle.js
,Webpack 配置如下:
resolve
指定可以被import
的文件后缀。比如Hello.jsx
这样的文件就可以直接用
import Hello from 'Hello'
引用。loaders
指定babel-loader
编译后缀名为 .js 或者 .jsx 的文件, 这样你就可以在这两种类型的文件中自由使用 JSX 和 ES6 了。webpack之external
按照官方文档的解释,如果我们想引用一个库,但是又不想让webpack打包,并且又不影响我们在程序中以CMD、AMD或者window/global全局等方式进行使用,那就可以通过配置externals。这个功能主要是用在创建一个库的时候用的,但是也可以在我们项目开发中充分使用。
假设:我们开发了一个自己的库,里面引用了lodash这个包,经过webpack打包的时候,发现如果把这个lodash包打入进去,打包文件就会非常大。那么我们就可以externals的方式引入。也就是说,自己的库本身不打包这个lodash,需要用户环境提供。
external的配置
externals的配置有以下几种:array , object ,reg。这三种形式都可以传入,前者其实是对后者的包含。 参考(https://www.tangshuang.net/3343.html)
devtool
设置source编译方式