本文已参与「新人创作礼」活动，一起开启掘金创作之路。

前端工程化

• 模块化（js/css/资源的模块化）
• 组件化（复用现有的UI结构、样式、行为）
• 规范化（目录结构的划分、编码规范化、接口规范化、文档、Git分支）
• 自动化（构建、部署、测试）

webpack的基本使用

​ webpack是前端项目工程化的具体解决方案，提供了友好的前端模块化开发

• 安装webpack模块
• 构建webpack.config.js文件，属于webpack的配置文件
• 使用webpack命令，打包项目

​ webpack 默认的打包入口文件为src/index.js

​ webpack 默认的输出文件路径为dist/main.js

​ 在webpack.config.js 中可以修改，默认路径

const path = require('path')

module.exports = {
	entry:path.join(__dirname,'./src/index.js'), //打包文件的入口路径
	output:{
		path: path.join(__dirname, './dist'), // 输出文件路径
		filename: 'bundle.js' //输出文件名
	}
}

webpack 中的插件

• webpack-devserver

  1. 当每次修改源码，webpack会自动对项目进行打包和构建
  2. 源代码更新到内存当中，使用时访问根目录下的文件 /bundle.js 开发使用非常不方便

• html-webpack-plugin

  1. webpack 中的 HTML 插件

  2. 可以通过此插件定义index.html页面的内容

     const HtmlPlugin = require('htm-webpack-plugin')
     
     const htmlPlugin = new HtmlPlugin({
         template: './src/index.html',
         filename: './index.html'
     })
     
     module.exports = {
         mode: 'development',
         plugins: [htmPlugin],
     }
     

webpack 中的 loader（加载器）

• css-loader

  // 运行 npm i style-loader@3.0.0 css-loader@5.2.6 -D
  // 在webpack.config.js 的module->rules 数组中，添加
  module:{
      rules:[
          {test:/\.css$/, use:['style-loader','css-loader']}
      ]
  }
  

• less-loader

  // 运行npm i less-loader@10.0.1 less@4.1.1 -D 命令
  // 在webpack.config.js 的module->rules中添加
  module:{
      rules:[
          {test:/\.less$/, use:['style-loader', 'css-loader', 'less-loader']}
      ]
  }
  

• url-loader

  // 运行 npm i url-loader@4.1.1 file-loader@6.2.0 -D
  module:{
      rules:[
          {test:/\.jps|pgn|gif$/, use: ['url-loader?limit=22229']},
      ]
  }
  

• babel-loader

  babel.config.js的配置文件，定义babel的配置项

  module.exports = {
      plugins:[['@bable/plugin-proposal-decorators'],{leagcy: true}]
  }
  

Webpack 打包发布

在package.json 文件的script节点下, 新增build命令

"script":{
    "dev":"webpack server",
    "build":"webpack --mode production"
}

-- model 是一个参数项，用来指定webpack的运行模式。production代表声场环境，进行代码压缩和性能优化 将打包的图片文件统一生成到image目录下

​ 修改webpack.config.js 中的url-loader配置项，新增outputPath选项

{
    test：/\.jpg|png|gif$/,
    use:{
        loader:'url-loader',
        option:{
        	limit: 22228,
            outputPath:'image'
        }
    }
}

自动清理dist目录下的旧文件

// 1. 安装插件
// npm i clean-webpack-plugin@3.0.0 -D

const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const cleanPlugin = new cleanWebpackPlugin()

plugins: [htmlPlugin,cleanPlugin],

// 在webpack.config.js 中配置 (@符号代替'./src' 根路径)
resolve:{
    alias:{
        '@':path.join(__dirname,'./src/')
    }
}