webpack4 学习第一天

最新推荐文章于 2025-09-09 23:13:10 发布

weixin_33825683

最新推荐文章于 2025-09-09 23:13:10 发布

阅读量78

点赞数

CC 4.0 BY-SA版权

文章标签： webpack json ViewUI

原文链接：http://www.cnblogs.com/Chen-Jian/p/8718150.html

第一步：

安装npm

第二步：

新建文件夹webpackDemo文件夹，通过cmd进入到这个项目文件夹下，输入npm init 初始化。

第三步：

安装webpack (非全局),webpack-cli(非全局)

npm install --save-dev webpack

npm install --save-dev webpack-cli

第四步：

在webpackDemo文件夹下，新建src文件夹，dist文件夹

在src下创建index.js和test.js

在dist下创建index.html

注意：webpack 4默认不需要配置文件！

它会查找./src/index.js作为默认入口点。而且，它会在./dist/main.js中吐出这个包。

所以在webpack 4中，不需要定义入口点和输出文件。

第五步：

借鉴一下别人的例子

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Webpack demo</title>
</head>
<body>
  <div id="root"></div>
  <script src="main.js"></script>
</body>
</html>

test.js

module.exports = function(){
var test = document.createElement('div')
test.textContent = 'webpack test!'
return test
}

index.js

const test = require('./test.js')
document.getElementById('root').appendChild(test())

第六步：

在package.json中

{
"name": "webpack1",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start":"webpack --mode development"
},
"author": "",
"license": "ISC",
"devDependencies": {
    "webpack": "^4.4.1",
    "webpack-cli": "^2.0.13"
}
}

注意：webpack 4: 生产模式和开发模式

一个用于开发的配置文件，用于定义webpack dev服务器和其他东西；一个用于生产的配置文件，用于定义UglifyJSPlugin和sourcemaps等

生产模式可以实现各种优化。包括缩小，规模提升，tree-shaking等等；另一方面，开发模式针对速度进行了优化，只不过是提供未缩小的捆绑包

如果不设置 --mode development，会出现下面的警告：

The ‘mode’ option has not been set. Set ‘mode’ option to ‘development’ or ‘production’ to enable defaults for this environment.（“mode”选项尚未设置。将“mode”选项设置为“development”或“production”以启用此环境的默认值。）

第七步：

在cmd中输入 npm run start