webpack初学(一)

心如止水_自在如风
224 阅读2分钟

这是我参与8月更文挑战的第4天，活动详情查看：8月更文挑战

webpack的作用是什么

  • 代码压缩：让网络请求的文件体积变小，提升性能
  • 处理浏览器端的兼容性：比如有些浏览器不支持一些最新的ES语法，webpack可以进行转译，这样就不会报错影响实际显示。
  • 性能优化

引例

用webpack实现li交替变色。

  1. 新建一个目录(目录路径需全英文)，在当前目录下运行npm init -y，初始化生成package.json

  2. 新建src源代码目录，在src目录下新建index.js，index.html

  3. 运行npm install jquery -S或npm install jquery --save，将jquery写入到package.json中的dependencies，不加-S参数也会放在dependencies，但是加上语义明确，这代表你安装的包从开发到上线都需要。

  4. 在index.html生成代码

    <ul>
    <li>这是第1个li</li>
    <li>这是第2个li</li>
    <li>这是第3个li</li>
    <li>这是第4个li</li>
    <li>这是第5个li</li>
    <li>这是第6个li</li>
    <li>这是第7个li</li>
    <li>这是第8个li</li>
    <li>这是第9个li</li>
</ul>

  5. 在index.js引入jquery

    //使用了ES6导入语法导入jQuery
import $ from 'jquery'

  6. 定义jquery的入口函数，并且实现功能

    $(function (){
    $('li:odd').css('background-color','pink')
    $('li:even').css('background-color','skyblue')
})

    然后给index.html引入<script src="index.js"></script>

    打开页面浏览后发现，无事发生，打开控制台发现以下报错

    image-20210805212657415

    因为使用了ES6导入语法，所以导致了兼容性的问题

引入webpack

这时候用webpack来解决这个问题，首先是安装webpack

npm install webpack webpack-cli -D

-D的意思是将这些加到package.json的devDependencies，在这里面的包代表只有开发的时候才需要，上线就用不上了。（-D是--save-dev的简写）

在项目中配置webpack

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

    module.exports = {
    mode:'development' //mode用于指定构建模式 可选值有development和production
}

    • development是开发模式的意思

    • production是生产上线模式的意思

      这些代码的意思是使用Node.js中的导出语法，向外导出一个webpack的配置对象。

  2. 在package.json的scripts中添加新增一个dev脚本

    image-20210805215653503

  3. 在终端中运行npm run dev，启动webpack进行项目的打包构建。第二步的操作实际上就是实现了你输入npm run dev实际上就和你直接运行webpack一样。image-20210805222401864

  4. 当打包构建之后，就会生成一个新的文件夹dist，dist里面有一个main.js image-20210805215834548

    我们知道上面的案例实际是因为兼容性的问题，webpack生成的main.js解决了兼容性问题，因此在index.html中直接将导入index.js替换成dist下的main.js就行

     <script src="../dist/main.js"></script>

    然后再看打开页面

    image-20210805222533703

    效果出现了，说明的确解决了兼容问题。

    返回去看执行过程，就是将勾出的两个文件合并成了main.js，并且转换成了浏览器兼容的js代码

avatar
文章
阅读
粉丝