devbox
weixin_40725706
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

01---webpack的基础篇

作者：weixin_40725706 | 2024-04-09 04:44:29

赞

踩

01---webpack的基础篇
01 为什么需要webpack构建工具？
  1. 需要转化ES6及以上的语法，因为低版本浏览器不支持ES6及以上的语法
  2.  
  3. 需要转化jsx的语法等
  4.  
  5. 需要补齐css的前缀，因为不同浏览器对于css样式的兼容不同需要加前缀，以及预处理器。
  6.  
  7. 压缩混淆，压缩代码 图片等。

02 初始webpack：配置文件的名称
  1. webpack默认的配置文件是 webpack.config.js文件
  2.  
  3. 可以通过webpack --config 指定配置文件

        

03 webpack的配置组成
  1. module.exports = {
  2.         
  3.                 entry:'./src/index.js',   @1 打包的入口文件
  4.  
  5.                 output:'./dist/main.js',  @2 打包的出口文件
  6.  
  7.                 mode:'production',      @3 环境
  8.  
  9.                 module:{
  10.  
  11.                         rules:[ {test:/\.txt$/, use:'raw-loader'} ]  @4 解析的loader
  12.                 },
  13.  
  14.                 plugins:[    @5 插件配置
  15.                         
  16.                         new HtmlwebpackPlugin({  
  17.  
  18.                                 template:'/src/index.html'
  19.                         })
  20.                 ]
  21. }

04 webpack环境的安装
  1. 第一步 打开终端安装nvm：通过curl安装执行命令如下：
  2.  
  3.        curl -o- https://raw.githubusercontent.com/nvm/v0.34.0/install.sh | bash
  4.  
  5. 第二步 将nvm添加到环境变量中去：执行如下的代码
  6.  
  7.        soure ~/.bash_profile
  8.  
  9. 第三步 检测nvm是否安装成功：执行如下命令
  10.  
  11.        nvm list 可以查看到已经安装的node的版本
  12.  
  13. 第四步 安装node.js:执行如下的代码
  14.  
  15.        nvm install v10.15.3 ； 对应的node.js的版本号；

   05 创建初始的项目并按照webpack和webpack-cli；
  1. 终端执行：mkdir mv-project;  创建了mv-project的目录
  2.  
  3. 进入目录：cd mv-project
  4.  
  5. 初始化项目： npm init -y
  6.  
  7. 安装webpack和webpack-cli: npm install webpack webpack-cli --save-dev
  8.  
  9. 查看webpack安装的版本终端中执行： ./node_modules/.bin/webpack -v
  10.  
  11. 上面的代码相当于在执行webpack这个打包工具。

06 简单的列子来看webpack的打包流程：

  第一步 创建webpack.config.js配置文件及相关脚本
  1. const path = require('path')
  2.  
  3. module.exports = {
  4.  
  5.     mode:'production',
  6.  
  7.     entry:'./src/index.js',
  8.  
  9.     output:{
  10.  
  11.         path:path.resolve(__dirname,'dist'),
  12.  
  13.  
  14.         filename:'bundle.js'
  15.     }
  16.  
  17. }

  第二步 需要在项目的跟目录下创建src目录以及index.js，hello.js文件

   hello.js文件代码如下：

  1. export const hello = ()=>{
  2.  
  3.     return  'hello webpack'
  4.  
  5. }

   index.js文件的代码如下：

  1. import {hello} from './hello.js'
  2.  
  3. document.write(hello())
  4.  
  5. console.log(hello())

第三步 执行打包的命令：在终端中执行如下命令：

./node_modules/.bin/webpack

 第四步 打包的结果 会在项目的根目录中创建一个dist目录并有一个bundle.js文件

 同时需要创建index.html文件导入webpack打包生成的dist目录下的bundle.js的文件

  1. <HTML>
  2.  
  3.     <head>
  4.  
  5.         <body>
  6.  
  7.             <script src='./dist/bundle.js'></scrit>
  8.         
  9.         </body>
  10.         
  11.     </head>
  12.  
  13. </Html>
07 简化./node_modules/bin/webpack打包的命令：通过npm run build进行打包
  1. 在package.json文件中：scripts对象中创建执行webpack脚本的命令：
  2.  
  3. 原理：模板局部安装会在node_modules/.bin目录下创建软连接
  4.  
  5. {
  6.   "name": "vue2code",
  7.  
  8.   "version": "1.0.0",
  9.  
  10.   "description": "",
  11.  
  12.   "main": "index.js",
  13.  
  14.   "scripts": {
  15.  
  16.     "build": "webpack",
  17.   },
  18.  
  19.   "keywords": [],
  20.  
  21.   "author": "",
  22.  
  23.   "license": "ISC",
  24.  
  25.   "dependencies": {
  26.        
  27.   }
  28. }

        

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/weixin_40725706/article/detail/390423
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号