webpack4入门操作

基于webpack4实践:
开始:打开控制面板,新建一个文件,进入该文件 -初始化package.json

$ mkdir tmp/webpack-demo
$ cd webpack-demo
$ npm init -y

打开文件,下面多出一个package.json的文件:

webpack4入门操作

接着在webpage-demo文件下,安装webpack,查看webpack版本

npm install -D webpack
npx webpack --version

在webpack4 已经将 webpack 命令行相关的内容都迁移到 webpack-cli,除了webpack 外,我们还需要安装 webpack-cli:

npm install -D webpack-cli

现在直接执行

webpack

出现如下错误:

webpack4入门操作

  1. 原因在于:没有设定 mode,这是 webpack 4 引入的,有俩种模式,development 与 production,默认为 production
  2. 入口模块不存在 - webpack 4 默认从项目根目录下的 ./src/index.js 中加载入口模块,所以我们或者新建一个 src/index.js 文件,或者指定一个入口文件

安装lodash

npm install --save lodash

我们新建一个src/index.js 参照官网操作:

import _ from 'lodash';
function component() {
var element = document.createElement('div');
// Lodash, now imported by this script
element.innerHTML = _.join(['Hello', 'webpack'], ' ');

return element;
 }
document.body.appendChild(component());

然后我们新建一个./dist/index.html文件

<!doctype html>
  <html>
   <head>
     <title>Getting Started</title>
   </head>
   <body>
    <script src="main.js"></script>
   </body>
  </html>

执行npx webpack,
此时dist文件夹下会出现mian.js文件

webpack4入门操作

你的输出可能会有所不同,但如果构建成功,那么你很好。另外,不要担心警告,我们稍后会解决。

打开dist/index.html在浏览器中打开,如果一切顺利,您应该看到以下文本:
'Hello webpack'。

目前,文件目录结构

webpack4入门操作

模块

从版本4开始,webpack不需要任何配置,但大多数项目都需要更复杂的设置,这就是webpack支持配置文件的原因。这比在终端中手动输入许多命令更有效率,因此我们创建一个替换上面使用的CLI行选项:

在项目下新建一个webpack.config.js文件写入

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

现在,让我们再次运行构建,而是使用我们的新配置文件

npx webpack --config webpack.config.js

此时dist文档下出现一个bundle.js的文件,修改dist/index.html 改成引入bundle.js

<script src="bundle.js"></script>

浏览器中打开index.html,仍可以出现文本:'Hello webpack'。

配置文件比简单的CLI使用更灵活。我们可以用这种方式指定加载器规则,插件,解析选项和许多其他增强。请参阅配置文档了解更多信息。

npm

由于从CLI运行webpack的本地副本并不是特别有趣,我们可以设置一个小捷径。让我们通过添加一个npm脚本 调整我们的package.json:

控制台执行:

npm run build

现在该npm run build命令可以用来代替npx我们之前使用的命令。

自定义参数可以通过在npm run build命令和参数之间添加两个破折号传递给webpack ,例如npm run build -- --colors。

下一步目标:查看基本概念和配置页面。此外,API部分深入了webpack提供的各种接口。

相关推荐