首页 > 其他分享> 文章详细

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

2022-03-20 11:59:14 阅读：154 来源： 互联网

标签：Vue webpack dev loader Webpack module 工程化 js 打包

【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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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