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入门操作

原因在于：没有设定 mode，这是 webpack 4 引入的，有俩种模式，development 与 production，默认为 production
入口模块不存在 - 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提供的各种接口。

webpack4入门操作

相关推荐