webpack4.x配置过程（一）

从 webpack v4.0.0 开始，可以不用引入一个配置文件。然而，webpack 仍然还是高度可配置的。在开始前你需要先理解四个核心概念：入口(entry)，输出(output)，loader，插件(plugins)，其次还有就是mode(模式)。
以下是官方文档解析：
entry point指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。
output 属性告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件，默认值为 ./dist。基本上，整个应用程序结构，都会被编译到你指定的输出路径的文件夹中。
loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript），用于转换某些类型的模块。loader 能够 import 导入任何类型的模块（例如 .css 文件）。
插件用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。

以下是一个简单的过程：
创建文件目录(package.json使用npm init创建)：

dist
—-index.htm
src
—–index.js
package.json
webpack.config.js

src/index.js

document.write('hello wrold');

dist/index.html

<!DOCTYPE html>
<html>
<head>
    <title>webpack test</title>
</head>
<body>
<script src="./bundle.js"></script>
</body>
</html>

webpack.config.js

var path = require('path');
const config = {
  entry: './src/index.js',                //入口配置
  output: {                               //出口配置
    path: path.resolve(__dirname, 'dist'),//设置输出的文件夹为dist
    filename: 'bundle.js'                 //设置输出后的文件名为bundle.js
  },
}

module.exports = config;

命令行

webpack

package.json用npm init创建，本身初始化了一下信息，此时不用修改。

在命令行里运行 webpack 后发现dist文件夹里新建了一个bundle.js，即配置成功了。（这里我是全局安装了webpack 跟webpack-cli）:
npm install -g webpack
npm install -g webpack-cli

你可能会用过
npm run dev 同 npm run build 命令来运行或输出vue项目，此处我们配置一下，使该项目也可以用到以上两个命令。

1、我们需要安装一些依赖包：
webpack-dev-server(命令：npm install webpack-dev-server –save-dev)
webpack（命令：npm install webpack）
webpack-cli（命令：npm install webpack-cli）
尽管你已经全局安装了webpack webpack-cli，在运行npm run dev时会报错找不到module webpack

2、配置package.json
在scripts属性加上：

    "build": "webpack --config webpack.config.js",
    "dev": "webpack-dev-server --mode development --config webpack.config.js"

加上后package如下：

{
  "name": "es62",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config webpack.config.js",
    "dev": "webpack-dev-server --mode development --config webpack.config.js"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.17.2",
    "webpack-cli": "^3.1.0",
    "webpack-dev-server": "^3.1.8"
  }
}

3、配置webpack.config.js

var path = require('path');
const config = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  devServer : {
    host: 'localhost',    // 服务器的IP地址，可以使用IP也可以使用localhost
    compress: true,       // 服务端压缩是否开启
    port: 3004,           // 端口
    hot: true,
    open: true,           // 自动打开浏览器
    overlay: {
        errors: true
    }
  }
}

module.exports = config;

4、接着运行npm run build 或npm run dev

webpack4.x配置过程（一）

猜你喜欢