webpack4入门操做

时间 2019-12-12

标签 webpack4 webpack 入门繁體版

原文原文链接

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

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

打开文件，下面多出一个package.json的文件：webpack

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

npm install -D webpack
npx webpack --version

在webpack4 已经将 webpack 命令行相关的内容都迁移到 webpack-cli，除了webpack 外，咱们还须要安装 webpack-cli：npm

npm install -D webpack-cli

如今直接执行json

webpack

出现以下错误:浏览器

缘由在于：没有设定 mode，这是 webpack 4 引入的，有俩种模式，development 与 production，默认为 production
入口模块不存在 - webpack 4 默认从项目根目录下的 ./src/index.js 中加载入口模块，因此咱们或者新建一个 src/index.js 文件，或者指定一个入口文件

安装lodashapp

npm install --save lodash

咱们新建一个src/index.js 参照官网操做：ui

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文件this

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

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

你的输出可能会有所不一样，但若是构建成功，那么你很好。另外，不要担忧警告，咱们稍后会解决。

打开dist/index.html在浏览器中打开，若是一切顺利，您应该看到如下文本：
'Hello webpack'。

目前，文件目录结构

模块

从版本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提供的各类接口。

1. webpack4入门篇
2. webpack4入门
3. webpack4 入门（一）
4. Webpack4 一、入门
5. webpack4 入门（二）
6. webpack4+入门使用
7. webpack4入门配置
8. webpack4入门实例
9. Git入门操做
10. Kafka入门操做
更多相关文章...
• Memcached入门教程 - NoSQL教程
• Neo4j数据库入门教程 - NoSQL教程
• YAML 入门教程
• Java Agent入门实战（一）-Instrumentation介绍与使用