还不会配置webpack,来看看这篇文章
Posted 十九万里
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了还不会配置webpack,来看看这篇文章相关的知识,希望对你有一定的参考价值。
webpack快速入门教程
重点:webpack是什么,可以干什么?gulp
1、webpack 介绍
什么是webpack https://www.webpackjs.com/
- Webpack是一个模块打包器(bundler)。
- 在Webpack看来, 前端的所有资源文件(js/json/css/img/less/…)都会作为模块处理
- 它将根据模块的依赖关系进行静态分析,生成对应的静态资源
五个核心概念
- Entry:入口起点(entry point)指示 webpack 应该使用哪个模块,来作为构建其内部依赖图的开始。
- Output:output 属性告诉 webpack 在哪里输出它所创建的 bundles,以及如何命名这些文件
- Loader:loader 让 webpack 能够去处理那些非 javascript 文件
- Plugins:插件则可以用于执行范围更广的任务。例如:打包优化、压缩,
- Mode:模式,有生产模式 production 和开发模式 development
理解 Loader
Webpack 本身只能加载 JS/JSON 模块,如果要加载其他类型的文件(模块),就需要使用对应的loader 进行转换/加载
Loader 本身也是运行在 node.js 环境中的 JavaScript 模块
本身是一个函数,接受源文件作为参数,返回转换的结果
loader 一般以 xxx-loader 的方式命名,xxx 代表了这个 loader 要做的转换功能,比如 less-loader。
理解 Plugins
插件可以完成一些loader不能完成的功能。
插件的使用一般是在 webpack 的配置信息 plugins 选项中指定。
配置文件(默认)
webpack.config.js : 是一个node模块,返回一个 json 格式的配置信息对象
2、零配置
- 零配置:不需要进行任何的配置即可对JS进行打包。直接通过命令就可以完成。
# 将src->index.js 打包到 dist->main.js当中 npx webpack # 将src->index.js 打包到 dist->main.js当中,指定模式(mode)为开发模式(development),默认是生产模式(production) npx webpack --mode development # 将src->index.js 打包到 dist->my.js当中 # output-filename:指定打包后的文件名 npx webpack --mode development --output-filename my.js # 将src->index.js 打包到 ../abc/build/my.js当中 # --output-path:文件夹路径 npx webpack --mode development --output-filename my.js --output-path ../abc/build # 将src->index.js,one.js,two.js 打包到 build/my.js文件中 npx webpack --entry ./src/index.js ./src/one.js ./src/two.js --mode development --output-filename my.js --output-path build
在项目根目录中新建一个package.json
"scripts": "build":"npx webpack --entry ./src/index.js ./src/one.js ./src/two.js --mode development --output-filename my.js --output-path build"
执行
npm run build # 如果scripts的属性名为start,可以省略run npm start
3、开启项目
- 项目的环境分为两种:
- 开发环境 (development):程序员写代码的环境。
- 生产环境 (production):代码已经完成,代码所运行的环境。
- 生成package.json文件
npm init -y
- 安装webpack
webpack:核心模块
webpack-cli:命令模块
npm install webpack webpack-cli -D
- 全局安装
npm install webpack webpack-cli -g
查看版本
webpack -v npx webpack -v
4、编译打包应用 application
创建js文件
- src/js/app.js
- src/js/module1.js
- src/js/module2.js
- src/js/module3.js
创建json文件
- src/json/data.json
创建主页面:
- src/index.html
运行指令
npx webpack --entry ./src/js/app.js --output-filename js/app.js --mode development --output-path build
- 功能: webpack能够编译打包js和json文件,并且能将es6的模块化语法转换成浏览器能识别的语法
结论:
- webpack能够编译打包 js 和 json 文件
- 能将 es6 的模块化语法转换成浏览器能识别的语法
- 能压缩代码
缺点:
- 不能编译打包 css、img 等文件
- 不能将 js 的 es6 基本语法转化为 es5 以下语法
改善:使用 webpack 配置文件解决,自定义功能
5、使用 webpack 配置文件
-
1-创建一个名字为webpack.config.js的文件:
const path = require("path"); module.exports = /*****************************指定入口文件*********************************************************/ // 1-指定字符串:将一个文件打包到一个文件 // entry:"./src/app.js" // 2-指定数组:将多个文件打包到一个文件 // entry: ["./src/app.js","./src/home.js"], // 3-指定对象:将多个文件打包到多个文件。新生成的文件名是设置的属性名。 // entry: // one:"./src/app.js", // two:"./src/home.js" // , // mode:"development" /*****************************指定出口目录及文件*********************************************************/ // 1-打包一个文件 // entry: "./src/app.js", // output: // // filename: "my.js"// 将打包后的文件名指定为my.js // filename: "./a/b/my.js",// 将打包后的文件名指定为my.js // path:path.join(__dirname,"/build") // , // mode:"development" // 2-打包多个 // entry: ["./src/app.js","./src/home.js"], // output: // filename: "my.js",// 将打包后的文件名指定为my.js // // filename: "./a/b/my.js",// 将打包后的文件名指定为my.js // path:path.join(__dirname,"/build"), // clean: true// 清空之前的打包内容。 // , // mode:"development" // 3-打包多个文件到多个文件。 entry: one:"./src/app.js", two:"./src/home.js" , output: filename: "[name].[hash:8].bundle.js",// 将打包后的文件名指定为my.js // filename: "./a/b/my.js",// 将打包后的文件名指定为my.js path:path.join(__dirname,"/build"), clean: true// 清空之前的打包内容。 , mode:"development"
-
执行
npx webpack
-
npx webpack会默认执行webpack.config.js。如果名字为其它,那么需要通过–config命令来解决
npx webpack --config my.config.js
6、清除打包文件目录(了解)
每次打包生成了文件,都需要手动删除,引入插件
clean-webpack-plugin
帮助我们自动删除上一次生成的文件
安装插件
cnpm install clean-webpack-plugin --save-dev
2. `webpack.config.js` 引入插件 ```js //1. 引入插件 const CleanWebpackPlugin = require('clean-webpack-plugin'); module.exports = . . . plugins: [ //2. 配置插件 new CleanWebpackPlugin() ],
运行指令
npx webpack
7、打包 less 资源
less 文件 webpack 不能解析,需要借助 loader 编译解析,使用步骤如下:
1、创建less文件
- src/less/test1.less
- src/less/test2.less
2、入口app.js文件
//引入两个 less 文件 import '../css/test1.less'; import '../css/test2.less';
3、安装 loader
cnpm install css-loader style-loader less-loader less --save-dev
4、配置 loader
module.exports = . . . module: rules:[ test:/\\.less$/, // 检查文件是否以.less结尾(检查是否是less文件) use:[ // 数组中loader执行是从下到上,从右到左顺序执行 'style-loader', // 创建style标签,添加上js中的css代码 'css-loader', // 将css以commonjs方式整合到js文件中 'less-loader' // 将less文件解析成css文件 ] ] ,
5、运行指令
npx webpack
8、JS 语法检查
webpack 使用 ESLint(https://eslint.bootcss.com/) 能对 JS 基本语法错误/隐患进行提前检查,但是不能检测运行时错误,使用步骤
1、安装loader
cnpm install eslint-loader eslint --save-dev
eslint 是语法检查的包
eslint-loader 是 eslint 在 webpack 中的 loader 包
2、webpack.config.js 配置 loader
module.exports = . . . module: rules: [ . . . test: /\\.js$/, //只检测js文件 exclude: /node_modules/, //排除node_modules文件夹 enforce: "pre", //提前加载使用 use: loader: "eslint-loader" //使用eslint-loader解析 ]
3、创建
.eslintrc.js
文件,放置到项目根目录module.exports = "parserOptions": "ecmaVersion": 6, // 支持es6 "sourceType": "module" // 使用es6模块化 , "env": // 设置环境 "browser": true, // 支持浏览器环境: 能够使用window上的全局变量 "node": true // 支持服务器环境: 能够使用node上global的全局变量 , "globals": // 声明使用的全局变量, 这样即使没有定义也不会报错了 "$": "readonly" // $ 不允许重写变量 , "rules": // eslint检查的规则 0 忽略 1 警告 2 错误 "no-console": 0, // 不检查console "eqeqeq": 0, // 用 == 而不用 === 就报错 "no-alert": 0 // 不能使用alert , "extends": "eslint:recommended" // 使用eslint推荐的默认规则
4、运行指令
npx webpack
9、JS 语法转换
借助 Babel 可以将浏览器不能识别的新语法(ES6, ES7)转换成原来识别的旧语法(ES5),浏览器兼容性处理。
1、安装loader
cnpm install babel-loader @babel/core @babel/preset-env --save-dev
@babel/core 是 babel 的核心库
@babel/preset-env 是 babel 的预设的工具包,默认可以将所有最新的语法转为为 ES5
babel-loader 是 babel 在 webpack 中的 loader 包
2、配置loader
module: rules: [ . . . test: /\\.js$/, exclude: /node_modules/, use: loader: "babel-loader", options: presets: ['@babel/preset-env'] ]
3、运行指令
npx webpack
10、JS 兼容性处理
Polyfill 是一块代码(通常是 Web 上的 JavaScript),用来为旧浏览器提供它没有原生支持的较新的功能
安装 polyfill
cnpm install @babel/polyfill -D
app.js(入口文件)引入
import '@babel/polyfill';
解决 babel 只能转换语法的问题(如:let/const/解构赋值…),引入polyfill可以转换高级语法(如:Promise…)
11、打包样式文件中的图片资源
图片文件 webpack 不能解析,需要借助 url-loader编译解析
1、两张资源图片:
- 小图, 小于8kb: src/images/vue.png
- 大图, 大于8kb: src/images/react.jpg
2、在 less 文件中通过背景图的方式引入图片
.react width: 200px; height: 200px; background: url('../images/react.png') no-repeat; background-size: cover; .vue width: 200px; height: 200px; background: url('../images/vue.png') no-repeat; background-size: cover;
3、安装 loader
cnpm install file-loader url-loader --save-dev # css-loader的版本 cnpm install css-loader@5 -D
file-loader
可以指定要复制和放置资源文件的位置,以及如何使用版本哈希命名以获得更好的缓存。
url-loader
允许你有条件地将文件转换为内联的 base-64 URL (当文件小于给定的阈值),这会减少小文件的 HTTP 请求数。如果文件大于该阈值,会自动的交给file-loader
处理。4、webpack.config.js 配置 loader
module.exports = . . . module: rules: [ . . . test: /\\.(png|jpg|gif)$/, use: loader: 'url-loader', options: limit: 8192, // 8kb以下的图片会base64处理 outputPath: 'images', // 文件本地输出路径 publicPath: '../build/images', // 图片的url路径 name: '[hash:8].[ext]', // 修改文件名称和后缀 , ]
5、运行指令
npx webpack
12、打包 HTML 文件
HTML 文件不能直接被 webpack 解析,需要借助
HtmlWebpackPlugin
插件编译解析1、在 src 目录下创建 index.html 文件,注意不要在 HTML 中引入任何 CSS 和 JS 文件
2、安装插件
cnpm install html-webpack-plugin --save-dev
3、webpack.config.js 修改配置
// 插件都需要手动引入 const HtmlWebpackPlugin = require('html-webpack-plugin'); . . module.exports = . . plugins: [ new HtmlWebpackPlugin( // filename: "home.html",// 默认打包以后的文件名为index.html.--->home.html // inject: false,// 不自动引入JS文件 // inject: "head", inject: "body",// 指定JS文件在body尾部引入 hash:true, template: "./src/index.html",// 指定打包的模板文件。 minify: removeAttributeQuotes:true,// 移除双引号 removeComments:true,// 移除注释 collapseWhitespace:true ) ]
4、运行指令
npx webpack
src 目录就是源文件目录,所有的代码和资源都保存在该目录,index.html 也是如此
13、打包 HTML 中图片资源
url-loader 只能处理 JS 和 CSS 中引入的图片,无法处理 HTML 中的 img 图片,需要 html-loader 处理。
1、src/index.html 添加 img 标签
<img src="./images/sun.jpg" alt="">
2、安装loader
cnpm install html-loader@1 --save-dev
3、配置loader
module.exports = . . . module: rules: [ . . . test: /\\.(html)$/, use: loader: 'html-loader' ]
4、运行指令
npx webpack
14、打包字体资源
字体文件需要借助 file-loader 编译解析,以 iconfont 为例,下载一个项目
1、将字体文件保存在
src/iconfont
目录下2、修改
src/index.html
<span class="iconfont icon-qq"></span>
3、配置 loader
module.exports = . . . module: rules: [ . . . test: /\\.(eot|svg|woff|woff2|ttf|mp3|mp4|avi)$/, // 处理字体文件 loader: 'file-loader', options: outputPath: 'fonts', name: '[hash:8].[ext]' ]
4、运行指令
npx webpack
15、自动编译打包运行
之前的操作,每次修改代码都需要重新执行 webpack 命令,可以使用 webpack-dev-server 自动打包运行
1、安装 loader,通过webapck-dev-server可以快速搭建服务。代理。
cnpm install webpack-dev-server --save-dev
2、修改 webpack.config.js
. . . module.exports = . output: path: resolve(__dirname, 'build'), filename: 'js/app.js', //1. 添加 devServer 服务后需要调整输出的路径 publicPath: '/' , module: rules: [ . . . test: /\\.(png|jpg|gif)$/, use: loader: 'url-loader', options: limit: 8192, outputPath: 'images', name: '[hash:8].[ext]', //2. 删除 publicPath 配置 , ] , . . //3. 增加 devServer 配置 // 对服务进行配置 devServer: port:80,// 设置端口号 host:"api.zhangpeiyue.com", open:true,// 自动在浏览器中打开页面 compress:true,// false关闭gzip压缩,true开启(默认) // open:["home.html"],// 打开home.html.如果不指定默认打开的是index.html mode: 'development'
3、现在就可以启动服务
npx webpack serve
4、配置 package.json 中 scripts 指令。增加 server 配置
. . . "scripts": "start": "npx webpack serve --config my.config.js" , . . .
5、运行指令
npm run start # 名字为start 可以省略run npm start # 默认是webpack.config.js 通过--config指定配置文件。 npx webpack serve --config my.config.js
16、热模替换功能
模块热替换 (HMR - Hot Module Replacement) 功能会在应用程序运行过程中替换、添加或删除模块
修改 webpack.config.js 的 devServer 配置
. . . module.exports = //index.html 不能自动刷新的解决方法 //新增一个入口,解决开启热模块替换后首页无法刷新的问题 entry: main:['./src/js/app.js','./src/index.html'] , . . . devServer: open: true, compress: true, port: 3000, hot: true // 开启热模块替换功能 , mode: 'development'
17、devtool
devtool 是 webpack 中的一个配置, 可以将压缩/编译文件中的代码映射回源文件中的原始位置,便于调试代码
详细配置官网地址 https://www.webpackjs.com/configuration/devtool/
配置 webpack.config.js
. . . module.exports = . . . devtool:'eval-cheap-module-source-map',// 原始源代码(仅限行) mode: 'development'
推荐使用:
开发环境:
eval-cheap-module-source-map // 原始源代码(仅限行),构建速度较快 eval-source-map // 原始源代码,构建速度较慢
生产环境不建议使用。
18、准备生产环境 * (重要)
webpack 可以使用不同的配置文件,进行不同的编译。
1、创建文件夹 config,将 webpack.config.js 复制两份
- ./config/webpack.dev.js
- ./config/webpack.prod.js
2、修改 package.json 的指令
. . . "scripts": "start": "npx webpack serve --config ./config/webpack.dev.js", "build": "npx webpack --config ./config/webpack.prod.js" . . .
3、开发环境指令
- npm start 用于开发环境 不打包文件
- npm run build 用于生产环境 打包文件
19、提取 CSS 成单独文件(对CSS文件进行抽离。)
前面的 CSS 样式代码都是放在 style 标签中,这里可以借助 mini-css-extract-plugin 抽离 CSS 文件
1、安装插件
cnpm install mini-css-extract-plugin --save-dev
2、配置 webpack.prod.js
. . // 1. 引入插件 const MiniCssExtractPlugin = require("mini-css-extract-plugin"); module.exports = . . . module: rules: [ test: /.less$/, use: [ MiniCssExtractPlugin.loader, // 2. 修改配置 loader 'css-loader', 'less-loader' ] ] , plugins: [ . . new MiniCssExtractPlugin( // 3. 配置插件 filename: "css/[hash:8].css", ) ] . .
3、运行指令
npm start
20、添加 CSS 兼容
1、安装 loader
cnpm install postcss-loader autoprefixer --save-dev
2、配置 loader
. . . module.exports = . . module: rules: [ test: /\\.less$/, use: [ MiniCssExtractPlugin.loader, 'css-loader', "postcss-loader",// 1、 设置 postcss-loader 'less-loader', ] , . . ]
3、在项目的根目录下创建一个名字为:postcss.config.js
module.exports = plugins: [ require("autoprefixer") // 2. 配置插件 ]
4、在项目目录下创建
.browserslistrc
这里一要加目标浏览器设置cover 99.5%
5、运行指令:
npm run build
21、压缩 CSS
1、安装插件
cnpm install optimize-css-assets-webpack-plugin --save-dev
2、引入插件,配置插件
//1. 引入插件 const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin'); module.exports = plugins: [ . . . //2. 配置插件 new OptimizeCssAssetsPlugin( cssProcessorPluginOptions: //移除所有的注释 preset: ['default', discardComments: removeAll: true], , // 解决没有source map问题 cssProcessorOptions: map: // 不生成内联映射,这样配置就会生成一个source-map文件 inline: false, // 向css文件添加source-map路径注释 // 如果没有此项压缩后的css会去除source-map路径注释 annotation: true ) ], mode: 'producti
以上是关于还不会配置webpack,来看看这篇文章的主要内容,如果未能解决你的问题,请参考以下文章