玩转webpack(02):webpack基础使用

一、核心概念——entry

Entry用于指定webpack打包的入口

 1、单入口(entry是一个字符串)

module.exports = {entry: './src/index.js'
}

2、多入口(entry是一个对象)

module.exports = {entry:{app: './app.js',adminApp: './src/adminApp.js'}
}

二、核心概念——output

output用来告诉webpack如何将编译后的文件输出到磁盘

1、单入口

module.exports = {entry: './src/index.js',output: {filename: 'bundle.js',path: __dirname + '/dist'}
}

2、多入口

module.exports = {entry:{app: './app.js',adminApp: './src/adminApp.js'},output: {filename: '[name].js', // 通过占位符确保文件名的唯一path: __dirname + '/dist'}
}

三、核心概念——loaders

webpack默认只支持js和json两种文件类型,通过loaders去支持其他文件类型并且把他们转化成有效的模块,并且可以添加到依赖图中。


本身是一个函数,接受源文件作为参数,返回转换的结果。

1、常见的loader

名称描述
babel-loader转换ES6、ES7等JS新特性语法
css-loader支持.css文件的加载和解析
less-loader将less转换为css
ts-loader将TS转换成JS
file-loader进行图片、字体的打包
raw-loader将文件以字符串的形式导入
thread-loader多进程打包JS和CSS

2、loader的用法

module:{rules: [{test: /\.txt$/,    // test:指定匹配规则use: 'raw-loader'    // use:指定使用的loader名称}]
}

四、核心概念——plugins

插件用于bundle文件的优化,资源管理和环境变量注入

作用于整个构建过程

1、常见的plugins

名称描述
CommonsChunkPlugin将chunks相同的模块代码提取成公共js
CleanWebpackPlugin清理构建目录
ExtractTextWebpackPlugin将css从bundle文件里提取成一个独立的css文件
CopyWebpackPlugin将文件或者文件夹拷贝到构建的输出目录
HtmlWebpackPlugin创建html文件去承载输出的bundle
UglifyjsWebpackPlugin压缩JS
ZipWebpackPlugin将打包的资源输出生成一个zip包

2、plugins用法

plugins:[new HtmlWebpackPlugin({    // 放到plugins数组里template: './src/index.html'})
]

五、核心概念——mode

mode用来指定当前的构建环境是:production、develoment还是node

设置mode可以使用webpack内置的函数,默认值为production

1、mode的内置函数功能

选项描述
development设置 process.env.NODE_ENV 的值为 development.开启 NamedChunksPlugin 和 NamedModulesPlugin .
production设置 process.env.NODE_ENV 的值为 production.开启
FlagDependencyUsagePlugin , FlagInclu dedChunksPlugin ModuleConcatenationPlugin , NoEmitOnE rrorsPlugin , Occurrence0rderPlugin ,SideEffectsFl agPlugin 和 TerserPlugin .
none不开启任何优化选项

六、使用

1、使用babel-loader解析ES6和React JSX

babel的配置文件是:.babelrc

(1)安装

npm install -D babel-loader @babel/core @babel/preset-env @babel/preset-react
npm i react react-dom

(2)增加ES6的babel preset配置 (.babelrc)

{"presets": ["@babel/preset-env","@babel/preset-react"]
}

(3)新增文件reactTest.js

'use strict';
import React from "react";
import ReactDOM from "react-dom";class ReactComponents extends React.Component {render() {return 
Hello React
;} }ReactDOM.render(,document.getElementById('root') )

(4) 修改webpack.config.js

 'use strict'const path = require('path');module.exports = {entry: {main: './src/index.js',reactTest: './src/reactTest.js'},output: {path: path.join(__dirname, 'dist'),filename: '[name].js'},mode: 'production',module: {rules: [{test: /\.js$/,use: 'babel-loader'}]}}

2、css、less、sass解析

css-loader用于加载.css文件,并且转换成commonjs对象

style-loader将样式通过