学习webpack4 - 基础配置

学习webpack4 - 基础配置
学习webpack4 - HTML处理
学习webpack4 - 样式处理
学习webpack4 - ES6语法转化
学习webpack4 - 第三方库的使用
学习webpack4 - 抽离公共代码

=======================================================

基础配置

安装

yarn init -y 初始化项目
yarn add webpack webpack-cli -D

尝试运行

step1: 新建src目录， 在src目录下新增一个index.js文件，并输入：console.log('丸子');
step2: 打开package.json文件，添加一个脚本：

"scripts": {
   "build": "webpack"
 }

尝试运行一次：

npm run build

打包成功了！当前目录结构为：

当前目录中并无webpack.config.js这个文件却还能打包成功？由于在webpack4中没必要必定要有配置文件了，也没必要必定要指定一个入口和出口才能打包成功。它会默认找到./src/index.js 做为默认入口点而且在 ./dist/main.js 中输出模块包，可是这样不是很灵活，由于名字之类的都指定了，那么怎么本身配置这些东西呢？

入口&出口配置

step1: 根目录下新建一个webpack.config.js文件
step2: 打开webpack.config.js文件，进行入口和出口配置：

let path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resovle(__dirname, 'dist')
  }
}

尝试运行一下：npm run build

运行成功了。

当前目录结构为：

两个配置：

1. entry: 入口配置
   用来指定入口起点，默认./src，进入入口起点后，webpack会找出有哪些模块和库是入口起点直接和间接依赖的。

2. output: 出口配置
   用来指定在哪里输出所建立的bundles，默认./dist，其中：

   • filename: 输出文件名称
   • path: 输出文件存放路径，该路径是绝对路径

上面结果中还看到有一个warning说mode没有设置，这个mode是模式，接下来配置下这个mode

多入口和多出口配置

module.exports = {
  //...

  // 多入口和多出口配置
  entry: {
    home: './src/index.js',
    other: './src/other.js'
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist')
  },

  //...
}

这样就完成了多入口和多出口的配置，可是编译出的文件须要自动生成相应的html而且引入对应的js文件的时候改怎么处理呢？用chunks去区分，以下：

let HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  //...

  // 多入口和多出口配置
  entry: {
    home: './src/index.js',
    other: './src/other.js'
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist')
  },

  //插件配置
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html', //原始文件
      filename: 'index.html', //打包后的文件名称
      hash: true, //hash
      chunks: ['home']  //引入须要的那个对应的js的文件（多入口时用)
    }),
    new HtmlWebpackPlugin({
      template: './src/other.html', 
      filename: 'other.html',
      hash: true, //hash
      chunks: ['other'] 
    })
  ]
  //...
}

这样就保证了编译后自动生成html文件能正确引用生成的js文件。

模式配置

mode（模式）：分别是production(生产) 和 development(开发) 模式

方法一：打开webpack.config.js文件，配置mode

方法二：打开package.json文件，配置脚本

尝试运行，

npm run dev  //开发环境
npm run build //生产环境

警告消失，结果以下：

watch监控

项目中若是咱们代码有改动，webpack就会实时监控并编译的话，开发就会舒服的多，实现方法以下：

module.exports = {
  //...

   //监控配置
  watch: true,
  watchOptions: {
    poll: 1000, //每秒钟询问多少次
    aggregateTimeout: 500, //防抖
    ignored: /node_modules/ //忽略不须要监控的
  },
  
  //...
}

（补充）启动本地服务

在本地开发的时候， 老是要本身在浏览器中打开文件，这样很很差， 那么怎么在本地开一个服务呢？
step1: 安装webpack-dev-server

yarn add webpack-dev-server -D

step2: 打开webpack.config.js文件，配置webServer

devServer: {
  port: 3000, //端口号
  progress: true, //进度条
  contentBase: './dist', //指定目录运行服务
  open: true //自动打开浏览器
}

step3: 打开package.json文件，更改下脚本

"scripts": {
   "dev": "webpack --mode development && webpack-dev-server",
   "build": "webpack --mode production"
 }

尝试运行：

npm run dev

成功！结果以下：

此时浏览器会自动打开 http://localhost:3000/