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 學習第一天