实际前端开发

  1. 模块化(js)
  2. 组件化(ui)
  3. 规范化
  4. 自动化(构建,部署,自动化测试)

初识webpack

  • 功能: 代码压缩混淆, 处理浏览器JavaScript的兼容性, 性能优化
  • 定义: 解决前端工程化的具体解决方案

初始化配置

  • npm install init -y 初始化package.json
  • -S –save, 将下载的包名和版本号 装到dependencies下(开发和部署)
  • -D –save-dev, 将包记录到devDependencies(只在开发过程中)
  • 安装webpack npm i [email protected] [email protected] -D
  • 在根目录下配置webpack.config.js 配置当前的环境mode 有两种选择 development和production
  • 运行webpack 在package.json 下的scripts中配置webpack命令
  • 要想实现webpack压缩功能将webpack.config.js模式修改为production

entry指定打包入口

  • 表示要处理的那个文件
  • 使用path模块path.join(__dirname, '')

output指定打包出口

  • 数据类型对象 path 指定存放的目录 filename 生成的文件名

安装插件

  • 安装[email protected] -D 实现实时自动打包
  • 将打包的文件生成到内存中, 不是物理磁盘中
  • 使用时将srcipt中的地址改为根目录/使用地址http://localhost:8080访问

安装html-webpack-plugin

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
const path = require('path')
// 导入html-webpack-plugin 
const HtmlPlugin = require('html-webpack-plugin')
// 创建插件的实例对象
const html = new HtmlPlugin({
  // 指定复制的页面
  template: './src/index.html',
  // 指定复制出来的文件名和存档路径
  filename: './index.html'
})
module.exports = {
  mode: 'development', //productions,
  entry: path.join(__dirname, './src/index.js'),
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'main.js'
  },
  plugins: [html]
}

devSever 节点

  • 自动打开生成的网站, 展示网页效果
1
2
3
4
5
devServer: {
  open: true,
  port: 9090, //自定义端口号
  host: '127.0.0.1' // 指定打开地址
}

loader 加载器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
module: {
  rules: [{
      test: /\.css$/,
      use: ['style-loader', 'css-loader']
    },
    {
      test: /\.less$/,
      use: ['style-loader', 'css-loader', 'less-loader']
    },
    {
      test: /\.(png|jpg|gif|jpeg)$/,
      use: 'url-loader'
    }
  ]
}
  • 使用babel-loader对js进行打包处理, 处理webpack无法处理的js高级语法 npm i [email protected] @babel/[email protected] @babel/[email protected] -D 在根目录下创建一个babel.config.js文件 将插件配置写入 [["@babel/plugin-proposal-decorators", { "legacy": true }], ["@babel/plugin-proposal-class-properties"]]
1
2
3
4
5
6
7
module.exports = {
  plugins: [
    ["@babel/plugin-proposal-decorators", {
      "legacy": true
    }]
  ]
}

配置build命令

  • 创建一个scripts 脚本 webpack --mode production
  • 将文件统一放到某个文件下 js配置path 图片在url中以地址方式传递outputPath参数
  • 使用clean-webpack-plugin插件将原来的dist文件先清理在生成

Source Map

  • 存储着原来的位置信息
  • 定位源代码的位置, 在配置文件中加入devtool:'evel-source-map' 开发环境下
  • 在发布项目时, 能定位行号, 但是不暴露源代码 nosources-source-map 生产环境下
  • 可以定位和显示源代码 使用source-map
  • @表示src源代码目录
1
2
3
4
5
resolve: {
  alias: {
    "@": path.join(__dirname, './src/')
  }
}

webpack.config.js最终配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
const path = require('path')
// 导入html-webpack-plugin 
const HtmlPlugin = require('html-webpack-plugin')
// 创建插件的实例对象
const html = new HtmlPlugin({
  // 指定复制的页面
  template: './src/index.html',
  // 指定复制出来的文件名和存档路径
  filename: './index.html'
})
const {
  CleanWebpackPlugin
} = require('clean-webpack-plugin');
module.exports = {
  devtool: 'nosources-source-map', // eval-source-map
  mode: 'development', //productions,
  entry: path.join(__dirname, './src/index.js'),
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'js/main.js'
  },
  plugins: [html, new CleanWebpackPlugin()],
  devServer: {
    open: true,
    port: 9090, //自定义端口号
    host: '127.0.0.1' // 指定打开地址
  },
  module: {
    rules: [{
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.less$/,
        use: ['style-loader', 'css-loader', 'less-loader']
      },
      {
        test: /\.(png|jpg|gif|jpeg)$/,
        use: 'url-loader?limit=447&outputPath=images'
      },
      // 处理高级的js语法
      {
        test: /\.js$/,
        use: 'babel-loader',
        exclude: '/node_modules/'
      }
    ]
  },
  resolve: {
    alias: {
      "@": path.join(__dirname, './src/')
    }
  }
}