内容简介:一起安装
一、安装配置
- 【 前提 】安装
node.js
环境【官网下载】 https://nodejs.org/zh-cn/
安装教程不赘述
- 创建项目文件夹
例如创建如下文件夹
webpack_demo1
-
创建配置项
npm init -y
生成一个
package.json
文件 如下图 -
全局安装
webpack
(不推荐,进行下一步操作)npm install webpack -g
-
局部安装
webpack
(推荐)npm install webpack --save-dev
- 另外,
webpack 4
要求安装包
npm install webpack-cli --save-dev
- 另外,
一起安装
npm install webpack webpack-cli --save-dev
以下表示安装成功
-
创建入口文件
./src/index.js
任意编写
index.js
文件内容用于测试
-
配置生产和开发模式
打开
package.json
文件添加如下脚本"scripts": { "dev": "webpack --mode development", "build": "webpack --mode production" }
-
现在运行:
npm run dev
生成
dist/main.js
,其中main.js
没有压缩npm run dev
表示 开发模式npm run build
此时的
main.js
被压缩 ,这便是 生产模式
-
接下来看看打包的js文件是否能够使用
- 创建
index.html
引入打包好的main.js
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="./main.js" charset="utf-8"></script> </head> <body> </body> </html>
- 创建
- 打开浏览器调试
输出结果表示打包成功,大功告成 !!!
二、使用配置文件进行打包
上一讲中我们打包没有用到 webpack.config.js
配置文件,webpack4把自己定位为一个零配置的工具。这一讲学习配置文件使用,更好地学习webpack。
- 根目录下新建一个
webpack.config.js
文件 (记载配置信息) -
配置文件
const path = require('path'); module.exports = { entry:'./public/index.js', output:{ path:path.resolve(__dirname,'build'), filename:'bundle.js' } }
字段 意义 entry 入口,所需打包的文件的路径 output 出口 path 文件打包后存放的路径 path.solve() 将路径或者路径片段的序列处理成绝对路径 _dirname 表示当前文件所在目录的绝对路径 filename 打包后文件的名称 - 按照配置项新建一个入口文件
public/index.js
- 运行
npm run dev
三、配置入口和出口的进阶使用
一、单出口形式
webpack.config.js
const path = require('path'); module.exports = { //单出口形式 entry:['./public/index.js','./public/index2.js'],//有多个文件 output:{ path:path.resolve(__dirname,'build'), filename:'bundle.js' } }
-
运行
npm run dev
生成唯一的打包文件
bundle.js
二、多出口形式
webpack.config.js`
const path = require('path'); module.exports = { //多出口形式 entry:{ entryOne:'./public/entryOne/index.js', entryTwo:'./public/entryTwo/index.js', }, output:{ path:path.resolve(__dirname,'build'), filename:'[name].js' } }
- 文件结构
-
运行
npm run dev
- 生成两个打包文件
- 生成两个打包文件
四、配置webpack-dev-server
一、了解 webpack-dev-server
webpack-dev-server webpack
二、安装webpack-dev-server
npm install --save-dev webpack-dev-server
三、 配置webpack.config.js文件
devServer:{ contentBase:'./dist', //设置服务器访问的基本目录 host:'localhost', //服务器的ip地址 port:8080, //端口 open:true //自动打开页面 }
四、配置package.json
"scripts": { "start": "webpack-dev-server --mode development" }
五、运行命令
npm run dev
打包文件
npm run start
打开服务器
五、打包css
- 安装loader
npm install style-loader css-loader --save-dev
-
配置loader
-
在
webpack.config.js
文件里配置module中的rules,如下:- test 属性,用于标识出应该被对应的 loader 进行转换的某个或某些文件。
- use 属性,表示进行转换时,应该使用哪个 loader。
module.exports = { /*入口和出口文件可以不用配置,默认*/ module:{ rules:[ { test:/\.css$/, use:['style-loader','css-loader']//引入的顺序至关重要,不可改变 } ] } }
-
-
测试是否打包成功
- 在
src
下创建index.css
文件 - 在
index.js
中引入index.css
文件
require('!style-loader!css-loader!./index.css');
- 进行打包后运行
npm run dev
(之前配置好,详见 第一篇文章:webpack4 基础配置 )红色的背景,控制台输出
hello
- 在
------------
六、使用babel编译ES6
-
babel转化语法所需依赖项:
-
babel-loader
: 负责es6
语法转化 -
babel-core
:babel
核心包 -
babel-preset-env
:告诉babel
使用哪种转码规则进行文件处理
-
-
安装依赖
npm install babel-loader @babel/core @babel/preset-env --save-dev
-
配置
webpack.config.js
文件{ test:/\.js$/, exclude:/node_modules/, use:'babel-loader' }
-
新建
.babelrc
文件配置转换规则{ "presets":["@babel/preset-env"] }
-
或者直接在
webpack.config.js
文件中配置规则{ test:/\.js$/, exclude:/node_modules/, use:{ loader:'babel-loader', options:{ presets:['@babel/preset-env'] } } }
七、提取分离打包css
前面讲过 将css文件引入到js文件中,然后一起打包成js文件,现在我们学习单独提取分离css并且打包。
-
安装插件
min-css-extract-plugin
npm install mini-css-extract-plugin --save-dev
-
配置
webpack.config.js
-
引入插件
const MiniCssPlugin = require("mini-css-extract-plugin");
-
rules 设置
{ test:/\.css$/, use:[MiniCssPlugin.loader,'css-loader'] }
-
plugins 设置
new MiniCssPlugin({ filename:'./css/[name].css' })
截图
-
- 运行命令打包
八、压缩优化css
压缩css,去除注释
-
安装插件
npm install --save-dev optimize-css-assets-webpack-plugin
-
配置
webpack.config.js
-
头部引入插件
const OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin") `
-
| 参数 | 意义 |
| ------------------------- | ------------------------------------------------------------ |
| assetNameRegExp | 正则表达式,用于匹配需要优化或者压缩的资源名。默认值是<br/>/.css$/g |
| cssProcessor | 用于压缩和优化CSS 的处理器,默认是 cssnano. |
| cssProcessorPluginOptions | 传递给cssProcessor的插件选项,默认为{} |
| canPrint | 表示插件能够在console中打印信息,默认值是true |
| discardComments | 去除注释 |
-
在
plugins
模块引入new OptimizeCssAssetsPlugin({ assetNameRegExp:/\.css$/g, cssProcessor:require("cssnano"), cssProcessorPluginOptions:{ preset:['default',{discardComments:{removeAll:true}}] }, canPrint:true })
- 运行打包命令之后就可以压缩
webpack --mode development
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
ANTLR 4权威指南
Terence Parr / 张博 / 机械工业出版社 / 2017-5-1 / 69元
ANTLR是一款强大的语法分析器生成工具,可用于读取、处理、执行和翻译结构化的文本或二进制文件。它被广泛应用于学术领域和工业生产实践,是众多语言、工具和框架的基石。Twitter搜索使用ANTLR进行语法分析,每天处理超过20亿次查询;Hadoop生态系统中的Hive、Pig、数据仓库和分析系统所使用的语言都用到了ANTLR;Lex Machina将ANTLR用于分析法律文本;Oracle公司在S......一起来看看 《ANTLR 4权威指南》 这本书的介绍吧!