Webpack4 学习笔记 - 01：webpack的安装和简单配置

时间 2019-11-10

标签 webpack4 webpack 学习笔记安装简单配置繁體版

原文原文链接

安装 `webpack`

新建一个Demo文件夹，执行初始化：html

npm init

在Demo文件夹里安装 webpack 和 webpack-cli ：node

npm install webpack webpack-cli -D

webpack-cli 可使用命令行的方式来使用 webpack，从版本4开始，webpack 和 webpack-cli 分别管理，若是不安装 webpack-cli, 就无法使用命令行了。安装完以后，执行webpack

webpack -v

查看安装是否成功。可是，命令执行后，会给你一个大大的错误提示，相似这样：web

webpack: command not found

这是由于 webpack 并不是全局安装的，当输入这个命令时，npm 会从全局的目录模块中找 webpack，找不到就报错了。
那怎么运行刚装好的 webpack 呢？经过 npx 命令来运行就OK了：npm

npx webpack -v

npx 会寻找存在于项目内node_modules目录下的安装包。json

建立项目并简单配置

webpack安装完毕，接下来就开始写demo，建立几个文件夹和文件，如图：app

index.html 中的内容：dom

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>webpack4 学习笔记</title>
</head>
<body>
    <div id='root'></div>
    <script src='./dist/bundle.js'></script>
</body>
</html>

header.js中的内容：学习

function Header() {
    var dom = document.getElementById('root');
    var header = document.createElement('div');
    header.innerText = '这里是Header区域';
    dom.append(header);
}

module.exports = Header;

index.js中的内容：ui

const Header = require('./header.js');

new Header();

webpack.config.js中的内容：

const path = require('path');  // 获得的path为webpack.config.js所在的目录

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

    mode: 'development'
}

其中 webpack.config.js 是 webpack 的默认配置文件，关于 webpack 的配置信息默认都要写到这个文件中。

entry 是 webpack 要打包的入口文件，必需要提供一个入口，webpack 才知道从哪里开始打包，不然会报错，这里的入口文件就是src目录下的index.js文件。

output 是出口文件，即打包过的文件放到哪里了。path 就是存放的路径，path.resolve(__dirname, 'dist') 表示路径为根目录下的dist文件夹。filename: 'bundle.js' 表示打包后的文件名为bundle.js。

mode: 'development' 表示当前的工做模式为开发环境，若是不配置 mode 则默认为 production，即生产环境。

简单配置完成，运行命令：

npx webpack

能够看到文件已经打包好，webpack自动生成了一个dist目录，并把bundle.js放在了该目录下：

打开index.html，能够看到内容正确显示出来：

OK，一个简单的配置完成了。

若是不想经过

npx wepack

这个命令来打包，能够在package.json中配置下 scripts：

"scripts": {
    "bundle": "webpack"
  },

这样，在命令行输入

npm run bundle

一样会完成打包，并且这种配置很灵活，后续能够配置不一样的命令来打包出不一样的结果。

Webpack4 学习笔记 - 01：webpack的安装和简单配置

安装 webpack

建立项目并简单配置

安装 `webpack`