首页 > 其他分享> > 【Vue学习笔记】一、前端工程化与Webpack

【Vue学习笔记】一、前端工程化与Webpack

2022-03-20 11:59:14 作者：互联网

【Vue学习笔记】一、前端工程化与Webpack

- - 一、前端工程化与Webpack

一、前端工程化与Webpack

注意：该部分内容仅需了解原理，不需要特别记忆

1)前端工程化

模块化（js的模块化、css的模块化、资源的模块化）
组件化（复用现有的UI结构、样式、行为）
规范化（目录结构的划分、编码规范化、接口规范化、文档规范化、GIt分支管理）
自动化（自动化构建、自动部署、自动化测试）

2）webpack

概念：webpack是前端项目工程化的具体解决方案

主要功能：它提供了友好的前端模块化开发支持，以及代码压缩混淆、处理浏览器端JavaScript的兼容性、性能优化等强大的功能

插件在https://npmjs.com中查阅文档

3）webpack的基本使用

1.创建列表隔行变色项目

npm install xxx -S命令把包记录到dependencies里（上线要用）（是–save的简写）
npm install xxx -D命令把包记录到devDependencies里（仅开发用）(是–save-dev的简写)

2.在项目中配置webpack

在项目根目录中，创建名为webpack.config.js的webpack配置文件，并初始化如下的基本配置

module.exports = {
	mode: 'development' //mode用来指定构建模式，可选值有development和production
    //如果是production，则会进行代码压缩
}

在package.json的scripts节点下，新增dev脚本如下：

"scripts": {
    "dev": "webpack" //script节点下的脚本，可以通过npm run执行，例如npm run dev
}

dev可以任意命名，是npm run xxx的名字

3.在终端中运行npm run dev执行打包，然后会在dist文件夹下生成main.js，在Index.html中导入该js即可

#####　3.指定webpack的entry和output

在webpack 4.x和5.x的版本中，有如下的默认约定：

①默认的打包入口文件为src -> index.js

②默认的输出文件路径为dist -> main.js

在webpack.config.js配置文件中，通过entry节点指定打包的入口，通过output节点指定打包的出口

const path = require('path') //导入node.js中专门操作路径的模块

module.exports = {
    entry: path.join(__dirname, './src/index.js'), //打包入口文件的路径
    output:{
        path: path.join(__dirname, './dist'). //输出文件的存放路径
        filename: 'bundle.js' //输出文件的名称
    }
}

4.webpack中的插件

最常用的webpack插件有如下两个：

①webpack-dev-server

类似于node.js中的nodemon工具
每当修改了源代码，webpack会自动进行项目的打包和构建

②html-webpack-plugin

webpack中的HTML插件（类似于一个模板引擎插件）
可以通过此插件自定制index.html页面的内容

①配置webpack-dev-server

修改package.json -> scripts中的dev命令，在webpack后面加上serve

"scripts":{
    "dev": "webpack serve"
}

再次执行npm run dev，重新打包项目，可以打开localhost:8080，查看自动打包效果

②解决Cannot GET /问题


module.exports = {
	mode: 'development', //mode用来指定构建模式，可选值有development和production
    //加入下面这段告知 webpack-dev-server，将 './' 目录下的文件 serve 到 localhost:8080 下(寄存到服务器下)
	devServer: {
		static: "./"
	}
}

③配置html-webpack-plugin

因为每次打开http://localhost:8080是一个文件目录而非index.html，所以可以借助html-webpack-plugin把src里的index.html复制到sreve下（内存里）

//1.导入HTML插件，得到一个构造函数
const HtmlPlugin = require('html-webpack-plugin')

//2.创建HTML插件的实例对象
const htmlPlugin = new HtmlPlugin({
    template: './src/index.html', //指定源文件的存放路径
    filename: './index.html', //指定生成的文件的存放路径
})

module.exports = {
    mode:'development',
    plugins: [htmlPlugin], //3.通过plugins节点，使htmlPlugin生效
}

该插件除了可以复制页面，还会自动注入内存里的webpack打包js

④devServer节点

在webpack.config.js文件中，可以新增一个devServer节点，自动打开运行的服务器地址

module.exports = {
	mode: 'development', 
	devServer: {
		static: "./"
	},
	plugins: [htmlPlugin],
    devServer:{
        open: true, //首次打包成功后，自动打开
        port: 8081, //
        host: '127.0.0.1' //指定运行的地址
    }
}

⑤loder

非.js后缀结尾的模块，webpack默认处理不了，需要调用loader加载器才可以正常打包，否则会报错

loader加载器的作用：协助webpack打包处理特定的文件模块，比如：

css-loader可以打包处理.css相关的文件
less-loader可以打包处理.less相关的文件
babel-loader可以打包处理webpack无法处理的高级js语法

导入css

在webpack中，一切皆模块，index.js是webpack的入口，一切导入都在此进行

//导入样式
import './css/index.css'

直接run服务器，会发现报错提示没有合适的loader

安装loader：

npm i style-loader css-loader -D

然后在webpack.config.js的module -> rules数组中，添加loader规则如下：

module: {
    rules: [ //文件后缀名的匹配规则
        {test: /\.css$/, use: ['style-loader', 'css-loader']}
    ]
}

导入less

配置一个index.less

html, body, ul{
    margin: 0;
    padding: 0;
    li{
        line-height: 30px;
        padding-left: 30px;
        font-size:12px;
    }
}

直接运行会与前面css一样的问题，所以也需要装loader

npm i less-loader less -D

添加规则

module:{
    rules: [
        {test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader']},
    ]
}

导入图片

导入图片的过程类似

npm i url-loader file0loader

module:{
    rules: [
        {test: /\.jpg|png|gif$/, use: 'url-loader?limit=22229'}, 
    ]
}

其中limit用来指定图片的大小
只有<=limit大小的图片，才会被转为base64格式的图片

高级语法的Loader

js中比如装饰器一类的高级语法webapack无法直接打包，所以也需要loader

npm i babel-loader babel/core @babel/plugin-proposal-decorators -D

module:{
    rules: [
        {test: /\.js$/, use: 'babel-loader', exclude: /node_modules/}, 
    ]
}

注意node_modules里的不用转换，所以要包含exclude: /node_modules/

具体哪些语法要装哪些loader可以在https://babeljs.io查阅

5.发布

把所有页面打包好发给后端，让后端来部署上线

在pakage.json文件的scripts节点下，新增build命令如下：

"scripts":{
    "dev": "webpack serve", //开发环境中，进行dev命令
    "build": "webpack --mode production" //项目发布时，运行build命令
}

–model是一个参数项，用来指定webpack的运行模式，production代表生产环境，进行代码压缩和性能优化

**注意：**通过–mode方法运行的webpack，会覆盖掉module.export里的mode选项

运行后打包好的文件就在dist里

然而打包出来的文件会很乱，所以需要进一步处理

①把JavaScrip文件统一生产到js目录中

在webpack.config.js配置文件里的output节点中配置

output:{
    path: path.join(__dirname, 'dist'),
        //明确告诉webpack把生成的bundle.js文件存放到dis目录下的js子目录里
    filename: 'js/bundle.js'
}

②把图片放到images里

在配置loader的use里用&多加一段参数outputPath=images

module:{
    rules: [
        {test: /\.jpg|png|gif$/, use: 'url-loader?limit=22229&outputPath=images'}, 
    ]
}

③每次发布自动删掉dist文件夹

安装clean-webpack-plugin插件

const { CleanWebpackPlugin } = require('clean-webpack-plugin')
module.exports = {
    plugins:[htmlPlugin, new CleanWebpackPlugin()]
}

4)SourceMap

Source Map就是一个信息文件，里面存储着位置信息，SourceMap文件中存储着压缩混淆后的代码，所对应的转换前的位置

有了它，出错的时候，出错工具将直接显示原始代码，而不是转换后的代码，能够极大的方便后期的调试

在webpack.config.js中添加如下配置即可

module.exports = {
    devtool: 'eval-source-map',
}

这个做法会暴露源码，直接点击报错信息可以直接定位到源码位置

如果指向定位报错的具体行数，且不想暴露源码，可以将devtool设置为nosources-source-map

module.exports = {
    devtool: 'nosources-source-map',
}

1.使用@表示src源码目录

在导入模块时，可以使用@表示src目录，从外往里找，不要使用…/，在webpack.config.js里配置

resolve:{
    alias:{
        '@': path.join(__dirname,'./src/')
    }
}

标签：Vue,webpack,dev,loader,Webpack,module,工程化,js,打包
来源： https://blog.csdn.net/Quindrich/article/details/123610306