webpack学习-总结,配置参考

以下是总结内容

1.命令行

//所有需要用到的命令行,三类

npm init -y//初始化package.json文件

npm i -D webpack webpack-cli//安装webpack
npm i -D webpack-dev-server//开发模式必备插件,实现动态刷新页面
npm i -D html-webpack-plugins//懒人必备插件,资源文件自动引用

npm i -D style-loader css-loader//配置loader必须(此处以css为例)

2.package.json文件脚本配置

"scripts": {
    //命令行方式使用webpack,不推荐
    "build1": "webpack ./src/main.js --mode development",

    //配置好webpack.config.js文件后,配合此脚本使用webpack
    "build": "webpack",

    //配置webpack-dev-server脚本,并实现热更新.注意,config文件修改后,需重新运行npm run dev
    "dev": "webpack-dev-server --hot"
  }

3.webpack.config.js配置文件参考.配置项实在太多,建议以后直接找别人配好的文件直接复制使用

// 注意: 不要使用 ES6 中的模块化语法 import/export
const path = require('path')
// const webpack = require('webpack')

// 导入html-webpack-plugin
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  // 入口
  entry: path.join(__dirname, './src/main.js'),

  // 出口
  output: {
    path: path.join(__dirname, './dist'),
    filename: 'bundle.js'
  },

  // 模式
  mode: 'development',

  devServer: {
    // 自动打开浏览器
    open: true,
    // 修改端口号
    port: 3000
    // 热更新: 在脚本中实现 
  },

  // 配置loader
  module: {
    rules: [
      // test 是一个正则, 用来匹配加载文件的路径
      //  比如: import './css/index.css'

      // use 表示使用哪个loader来处理这个类型的文件
      // 注意: 有顺序!!!
      // 处理过程是: 从右往左

      // css-loader 读取CSS文件,将其转化为一个模块
      // style-loader 拿到css-loader读取到的css文件内容,然后,创建一个style标签,插入到head
      { test: /\.css$/, use: ['style-loader', 'css-loader'] }
    ]
  },

  plugins: [
    new HtmlWebpackPlugin({
      // 指定模板文件路径
      template: path.join(__dirname, 'index.html')
    })
  ]
}