weboack的搭建
Posted ```飞翔的翅膀```
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了weboack的搭建相关的知识,希望对你有一定的参考价值。
1.webpack是什么
- webpack是一个模块化构建打包工具
- vue,react用的脚手架底层都是基于webpack搭建的
- webpack在公司中主要用于公司内部搭建前端环境
- 掌握node,webpack可以说是晋升架构师升的重要一环!
- 如果你会了webpack,你在vue脚手架中也可以轻松的配置
- 构建工具除了webpack之处,还有grunt,gulp,rollup…
2.webpack使用
webpack中文文档:https://webpack.docschina.org/concepts/
学习目标:用webpack,node,vue手动搭建一个前端环境
2.1 创建package.json
npm init -y
2.2 安装webpack,webpack-cli
npm install webpack webpack-cli -D
2.3 写点测试代码测试
webpack对原生JS和json文件默认支持
webpack支持的模块规范:CommonJS(require,module.exports),ES6(export ,import),AMD(require.js)
2.4运行 npm scripts脚本
....
"scripts":
"build": "webpack --watch"
,
.....
2.5 loader
loader:webpack资源加载器,因为webpack只支持js,json文件,对其他格式文件不支持,如果想要支持其他类型的文件,必须通过loader去转换这些文件,从而让webpack支持
经典的loader没有的错误:
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file
2.5.1 webpack常用loader
1、css想着的loader:style-loader,css-loader
2、图片loader:
webpack4.x:需要安装安装loader,并配置 file-loader,url-loader
例如: test:/\\.(png|jpg|jpeg|gif|svg)/i,use:['file-loader']
webpack5.x:不用安装loader,直接调用内置的asset modules直接配置使用
test:/\\.(png|jpg|jpeg|gif|svg)/i,type:'asset/resource',
3、解析sass
npm i sass-loader node-sass -D
test:/\\.s(a|c)ss/i,use:["style-loader","css-loader","sass-loader"]
4. 解析less
npm i less less-loader -D
test:/\\.less$/i,use:['style-loader','css-loader','less-loader']
5.解析svg与图片的解析规则一致
test: /\\.(png|jpg|jpeg|gif|svg)/i, type: 'asset/resource'
6.解析ES6/7/8/9.....
ES新语法通过babel转换,让浏览器支持
第一步:安装babel依赖
npm install --save-dev babel-loader @babel/core @babel/preset-env
第二步:配置webpack.config.js
test: /\\.js$/,
//排除node_modules
exclude: /node_modules/,
use:
loader: "babel-loader",
options:
presets: ['@babel/preset-env']
第三步:创建babel.config.json
"presets": ["@babel/preset-env"]
2.6 创建webpack配置文件,让webpack构建更强大
webpack默认配置文件:webpack.config.js
代码如下:
const path=require('path')
module.exports =
//项目入口js
entry: './src/main.js',
//项目出口,项目打包后最终的文件位置
output:
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
2.7 自动创建html并注入静态资源文件
html-webpack-plugin
安装: npm i --save-dev html-webpack-plugin
//实例化插件,以增强webpack的功能
plugins: [
new HtmlWebpack(
//模板文件
template: './public/index.html',
//打包后的html位置和文件名
filename:'home.html'
)
]
2.8 抽取css到单独的css文件中
安装:
npm install --save-dev mini-css-extract-plugin
参考:https://webpack.docschina.org/plugins/mini-css-extract-plugin/#root
2.9 打包好的文件分类管理和清理无用的文件
-
静态资源分类管理
js: output: //指定打包后的文件名 filename: ‘js/bundle[hash].js’, ,图片 output: assetModuleFilename: ‘images/pic[hash][ext]’, ,css: 第一步:在webpack.config.js引入mini-css-extract-plugin’ const MiniCssExtractPlugin = require(‘mini-css-extract-plugin’); 第二步:在module.rules中配置 test: /.css$/i, use: [MiniCssExtractPlugin.loader, ‘css-loader’] , 第三步:实例化MiniCssExtractPlugin plugins: [ new MiniCssExtractPlugin( filename:‘css/global.css’ )
-
清理无用的文件
output: ... clean:true, ... ,
以上是关于weboack的搭建的主要内容,如果未能解决你的问题,请参考以下文章