webpack 入门级操作

webpack 入门级操作

目前我只看了这么多，慢慢更新吧，道路漫长啊

一、需要的插件

• 在配置文件写入，然后下载

    "devDependencies": {
      "webpack": "^4.46.0",
      "webpack-cli": "^3.3.12",
      "html-webpack-plugin": "^4.5.2",
      "clean-webpack-plugin": "^3.0.0",
      "copy-webpack-plugin": "^6.4.1",
      "webpack-dev-server": "^3.11.3"
    },
  <!-- 使用 webpack-dev-server 这个插件需要设置一下 script -->
   "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1",
      "dev": "webpack",
      "start": "webpack-dev-server"
    },
  

二、webpack.config.js 配置文件

• 这是 webpack 打包的一些配置，先上代码，慢慢看
• 之前忘记说了，这里的 webpack 配置使用的是 4.0 版本，所以插件要是用我这里的版本，否则不适配会报错

var path = require('path');
// 这里引入插件
// 插件 1.2.3 的设置去下面寻找
// 插件 1
var HtmlWebpackPlugin = require('html-webpack-plugin');
// 插件 2
var { CleanWebpackPlugin } = require('clean-webpack-plugin');
// 插件 3
var CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
  // 设置为开发环境
  mode: 'development',
  // 产生 source-map 方便查错位置
  devtool: 'source-map',
  entry: {
    'js/app': './src/app.js',
  },
  output: {
    path: path.join(__dirname, './dist'),
    //这里的name 就是entry中"js/app"
    // [hash:6] 文件名增加6位hash字母，这样每次的文件名就不会重复，避免造成调用缓存
    filename: '[name]-[hash:6].min.js',
  },
  plugins: [
    // 插件 1  将某个网页作为首页模板，并且将其复制到dist文件夹下，注入压缩打包好js文件
    new HtmlWebpackPlugin({
      // 这里设置要作为模板的文件路径
      template: path.join(__dirname, './src/index.html'),
      // 这里设置，将文件放入 dist 里时的文件名
      app: 'index.html',
      // 设置是否要将打包好的js文件注入模板
      inject: true,
    }),
    // 插件 2 每次导出文件时将以前的js代码删除，避免重复增加
    new CleanWebpackPlugin(),
    // 插件 3 自动将静态文件内容复制到dist文件夹下
    new CopyWebpackPlugin({
      // 按照路径打包，打包
      patterns: [
        {
          from: path.join(__dirname, './src/public/img'),
          to: path.join(__dirname, './dist/public/img'),
        },
        {
          from: path.join(__dirname, './src/public/css'),
          to: path.join(__dirname, './dist/public/css'),
        },
        {
          from: path.join(__dirname, './src/public/html'),
          to: path.join(__dirname, './dist/public/html'),
        },
      ],
    }),
  ],
  // 这里是 webpack-dev-server 插件
  // webpack静态服务插件  设置服务配置，开启静态服务
  // 这个插件没有导入，但是设置 script 命令，可以去 一 中查看
  devServer: {
    // 目标静态服务器地址指向的文件夹
    contentBase: path.join(__dirname, './dist'),
    // 静态服务端口号
    port: 4001,
    // 这里可以解决跨域问题
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        pathRewrite: { '^/api': '' },
      },
    },
  },
};