webpack工程化

初始化工程

• 在空文件夹中使用初始化指令

npm init -y

安装webpack和webpack-cli

npm i webpack webpack-cli -D

安装插件

• webpack-dev-server：每当修改源代码webpack会自动打包和构建，会把生成的文件放到内存

npm i webpack-dev-server -D

• html-webpack-plugin：每次打包后把index.html复制一份到内存，方便打开

npm i html-webpack-plugin -D

• clean-webpack-plugin：每次使用build打包时，自动删除原有的dist文件夹

npm i clean-webpack-plugin -D

安装loder

• 安装css的loader

npm i style-loader css-loader -D

• 安装less的loader

npm i less-loader less -D

• 安装与url路径相关的loader，用于处理图片

npm i url-loader file-loader -D

• 安装babel-loder，用于处理webpack处理不了的JS高级语法

npm i babel-loader @babel/core  @babel/plugin-proposal-decorators -D

配置webpack

• 在根目录小创建 webpack.config.js 文件

const path = require('path') //导入路径模块

const HtmlPlug = require('html-webpack-plugin') //导入html-webpack-plugin插件模块
const htmlPlug = new HtmlPlug({
    template: './src/index.html', //指定要复制的文件路径
    filename: './index.html' //指定生成的文件路径
})

//导入clean-webpack-plugin插件模块
const { CleanWebpackPlugin } = require('clean-webpack-plugin')

module.exports = {
    //配置为开发模式，发布打包的时候配置为 production ，会在package.json的build指令中更改为 production
    mode: 'development', 
    //source-map配置，会在package.json的build指令中更改为 nosources-source-map
    devtool: 'eval-source-map', 
    entry: path.join(__dirname,'./src/index.js'), //指定打包入口
    output: { //指定打包出口
    filename: 'js/bundle.js', //输出js的文件名和存放文件夹
    path: path.join(__dirname, 'dist'), //输出文件目录
  },
  plugins: [htmlPlug, new CleanWebpackPlugin()], //将html-webpack-plugin插件配置入plugins节点
  devServer: {
    open: true, //初次打包完成后自动打开浏览器
    host: '127.0.0.1', //实时打包所使用的主机地址,默认为'localhost'，但可以自行修改
    port: 80 //实时打包所使用的端口
  },
  module: { //loader的配置，所有非js文件的匹配规则
    rules:[
        { test: /\.css$/, use:['style-loader','css-loader']}, //css
        { test: /\.less$/, use:['style-loader','css-loader','less-loader']}, //less
        //将文件大小小于等于limit的jpg\png\gif处理为base64格式，并将生成的文件放到images目录下
        { test: /\.jpg|png|gif$/, use:['url-loader?limit=64&outputPath=images']}, 
        { test: /\.js$/, use:['babel-loader'], exclude:/node_modules/} //处理node_modules文件夹外的js文件
    ]
  },
  resolve: {
    alias: { //配置@指向src这层目录
        '@': path.join(__dirname, './src/')
    }
  }
}

配置 dev 和 build 指令

• 在 package.json 的 scripts 节点中配置 dev 和 build 指令

  "scripts": {
    "dev": "webpack serve",
    "build": "webpack --mode production --devtool nosources-source-map"
  },