webpack4 学习第一天

Posted chen-jian

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了webpack4 学习第一天相关的知识,希望对你有一定的参考价值。

第一步:

安装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

技术分享图片

打包之后在dist中生成了一个新的文件main.js。

 

第八步:

打开index.html,可以看到

技术分享图片

参考:https://www.cnblogs.com/Immortal-brother/p/8695179.html

 































以上是关于webpack4 学习第一天的主要内容,如果未能解决你的问题,请参考以下文章

记录自己博客园的第一天

新手前端程序员就职指南之 - 入职第一天

冲刺合集

PHP获取一个月的第一天和最后一天

第二阶段个人总结

第二阶段个人冲刺总结