前端工程化 webpack

webpack

webpack 是前端项目工程化的具体解决方案
主要功能：他提供了友好的前端模块化的支持，代码压缩，处理浏览器兼容性，性能优化等功能

npm init -y
npm install jquery -S

安装webpack

 npm install webpack webpack-cli -D

-S --save
-D --save-dev

通过npmjs.com查看安装时选择-S还是-D

index.js 配置基础语句 以隔行变色为例

// es6导入语法
import $ from 'jquery'


// 定义jquery入口函数
$(function(){
    $('li:odd').css('background-color','red')
    $('li:even').css('background-color','pink')
})

项目中配置webpack

1.创建webpack.config.js配置文件并初始化

module.exports = {
   
    // 代表webpack运行模式，可选值 development  production
    mode:'development'
}

2.在package.json的stript节点，新增dev脚本

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

3.在终端中运行npm run dev命令，启动webpack项目的打包构建

npm run dev

4.生成dest文件

5.修改index.html下 js引入路径

<!-- <script src="index.js"></script> -->
<script src="../dist/main.js"></script>

webpack可选值应用场景

module.exports = {
   
    // 代表webpack运行模式，可选值 development  production
    mode:'production'
}

开发时使用development 因为追求的是打包的速度，而不是体积
反过来 发布时使用production 因为上线需要的是体积小

webpack的默认约定

• webpack4.x和5.x的版本中
  • 默认打包入口文件 src --> index.js
  • 默认输出文件 dist --> main.js

导入node文件模块

const path = require("path/posix");

    // entry:指定要处理哪个文件
    entry:path.join(__dirname,'./src/index.js'),
    output:{
   
        // 存放目录
        path:path.join(__dirname,'dist'),
        // 生成的文件名
        filename:'bundle.js'
    }

webpack插件

webpack-dev-server
自动打包和构建
html-webpack-plugin
webpack中的HTML插件,可以定制index.html页面内容

npm install webpack-cli -D

2.修改package.json

  "scripts": {
   
    "dev": "