webpack基础入门复习笔记(上)

1,1前端工程化

就是按规范开发项目。

• 模块化

• 组件化

• 规范化

• 自动化

1,2webpack的基本使用

概念：前端工程化的解决方案，主要的功能是提供了友好的前端模块化开发支持。

1,2,1使用步骤

• 初始化一个packge.json文件
   

  在一个空白的文件夹下用cmd使用 npm init -y  来初始化一个packge.json
  初始化这个以后下载的包都会跑到这个文件里面。

• 创建一个src目录
  

•  在src目录下面创建index.html和index.js文件
   

• 初始化首页基本结构，就是把首页的的架子搭好

• 安装jquery，比如这个例子就是在colorchange这个文件夹下cmd 运行

  npm install jquery -S  注意这里都是小写不然打包的时候会出错哦。

• 在项目中安装webpack 在终端运行如下命令，安装以下两个包
   

  npm install webpack@5.42.1 webpack-cli@4.7.2 -D

  注意只在开发阶段使用的包后面使用-D 上线以后也要使用的 -S 
  至于具体后面跟什么，可以在npmjs这个网站上面查询。

• index.js

  import $ from 'jquery'
  
  $(function() {
      $('li:odd').css('background-color', 'red')
      $('li:even').css('background-color', 'pink')
  })

• 在项目中配置webpack

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

     //使用node.js中的导出语法，向外导出一个webpack的配置文件
    module.exports = {
        //代表webpack运行的模式，可选值有两个development和production
        mode: 'development'
    }

  • 在package.json的script节点下，新增dev脚本如下。

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

    script节点下的脚本可以通过npm run运行。例如 npm run dev

  • 在终端中运行npm run dev 命令启动webpack进行项目的打包构建。

    npm run dev

  • 然后对index.html进行如下操作

        <!-- 使用npm run dev对webpack打包以后，会生成一个dist文件，下面这行代码就不需要了 -->
        <!-- <script src="./index.js"></script> -->
        <!-- 取而代之的是这行 -->
        <script src="../dist/main.js"></script>

1,2,2webpack中的默认约定

1,2,3自定义打包的入口与出口

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