Webpack

2022-06-23 22:31:10 阅读：166 来源： 互联网

标签：npm webpack dev js Webpack loader 打包

webpack

webpack-cli -v

npm install webpack -cli -g

webpack是前端项目工程化的具体方案

前端模块化开发
代码压缩混淆
处理浏览器的JavaScript的兼容性
性能优化

操作：

1初始化

npm init -y

2.引入jquery

 npm i jquery -S

问题：ES6的兼容性问题：

Uncaught SyntaxError: Cannot use import statement outside a module

安装webpack

npm i webpack@5.5.1 webpack-cli@4.2.0 -D

项目中配置webpack

1.创建webpack的配置文件

webpack.config.js

module.exports={
    mode:'development'
}

2.新增脚本dev

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

mode的可选值

development

开发环境
不会对打包生成的文件进行压缩和性能优化
打包速度快，适合在开发阶段

production

生产环境
会对打包的生成的文件进行代码压缩和性能优化
打包速度很慢，仅适合在项目发布阶段使用

webpack.config.js

打包前会先读取配置文件的内容，基于配置文件打包
webpack是基于node.js开发出来的打包工具，因此在它的配置文件中，支持使用node.js相关的语法和模块进行webpack的配置

webpack的默认约定

默认打包的入口文件为：src-->index.js
默认的输出为文件路径为dist---->main.js

entry-->指定打包的入口

output----->指定打包的出口

webpack的插件

拓展webpack的能力

webpack-dev-server
- 类似与node.js阶段用到的nodemon工具
- 每当修改了代码，webpack都会自动的进行项目的打包
html-webpack-plugin
- webpack中的html插件（类似模板引擎插件）
- 可以通过此插件来自定制index.htm页面的内容

webpack-dev-server自动监听

npm i webpack-dev-server@3.11.0 -D

1.需要修改webpack中的dev命令

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

打包的文件去哪了？

1.不配置会放到物理磁盘上

2.打包的会放到内存上，默认放到项目的根目录中

    <script src="/bundle.js"></script>

html-webpack-plugin

npm i html-webpack-plugin@4.5.0 -D

配置：

const path = require('path');
//导入html插件，得到一个构造函数
const HtmlPlugin =require('html-webpack-plugin');
//创建HTML的插件实例对象
const htmlPlugin = new HtmlPlugin({
    template:'./src/index.html',//源文件的存放路径
    filename:'./index.html',//指定生成文件的存放路径
})

module.exports={
    mode:'development',
    entry:path.join(__dirname,'./src/index.js'),
    output:{
        path:path.join(__dirname,'./dist'),
        filename:'bundle.js'
    },
    plugins:[htmlPlugin]
}

注意点：

1.也是将index.html放到了内存中，会自动的注入webpack-dev-server生成的js文件

2.删除dist文件不会影响正常运行

devServer节点

    devServer:{
        open:true,
        host:'127.0.0.1',
        port:80
    }

Loader

webpack只能默认打包处理.js后缀的结尾的文件

协助webpack打包处理特定的文件模块

css-loader可以打包处理.css相关的文件
npm i style-loader@2.0.0 css-loader@5.0.1 -D
module:{
rules:[//文件后缀名的匹配规则
{
test:/.css$/,use:['style-loader','css-loader']
}
]
}
顺序不能反，先后后前。先css-loader然后是style-loader
less-loader可以打包处理.less相关的文件
npm i less-loader@7.1.0 less@3.12.2 -D
babel-loader可以打包处理webpack无法处理的高级的js语法
解决url的资源
npm i url-loader@4.1.1 file-loader@6.2.0 -D
小图片变成base64
npm i babel-loader@8.2.1 $babel/core@7.12.3 @babel/plugin-proposal-class-propertries@7.12.1 -D
为什么要打包？
因为要把内存的文件变成实际的文件
"scripts": {
"dev": "webpack serve",
"build":"webpack --mode production"
},
1.自动清理dist文件
npm install claen-webpack-plugin@3.0.0 -D

企业打包发布：
- 生成打包报告，根据报告分析具体的报告
- 为第三方库启用CON加载
- 配置组件的按需加载
- 开启路由懒加载
- 自定首页内容

source map

    devtool:"eval-source-map",

实际又不用配置webpack

CUI工具

标签：npm,webpack,dev,js,Webpack,loader,打包
来源： https://www.cnblogs.com/HJZ114152/p/16406997.html

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

ICode9

Webpack