1.先刪除之前的webpack,webpack-cli,webpack-dev-server
npm uninstall webpack \
webpack-dev-server \
webpack-cli
npm uninstall webpacl-cli -g
2.安裝最新版本的webpack、webpack-cli(webpack4把腳手架webpack-cli從webpack中抽離出來的，所以必須安裝webpack-cli)、webpack-dev-server
npm install webpack \
webpack-dev-server \
webpack-cli -D
注意：也可以全局安裝指定版本cnpm install [email protected] -g
3.cd Desktop創建項目mkdir ninghao-webpack進入項目cd ninghao-webpack
4.創建一個npm的配置文件package.json cnpm init全部都下一步下一步就好
5.安裝局部webpack,保存到項目的依賴裏面，cnpm install --save-dev [email protected]（和全部版本保持一致，這一步也可以不操作）
6.在根目錄下新建index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>ninghao-webpack</title>
</head>
<body>
<div id="app"></div>
<script src="bundle.js"></script>
</body>
</html>
在根目錄下新建entry.js
document.getElementById('app').textContent='hello~';
命令行執行：
webpack entry.js bundle.js
最後執行：
open index.html
入門參考：http://www.runoob.com/w3cnote/webpack-tutorial.html
遇到問題，可參考以下博客https://blog.csdn.net/u012443286/article/details/79504289
若Error: invalid “instanceof” keyword value Promise
則是webpack 與webpack-dev-server 的版本不兼容,解決方法：
1.換成匹配的版本即可。
https://baijiahao.baidu.com/s?id=1620927431012303542&wfr=spider&for=pc
2.局部安裝webpack 命令行局部運行的方法
其實在很多項目中都是推薦局部安裝webpack，因爲全局安裝，輸入命令行之後，都會按照全局命令行來打包了。如果不同的項目用的不同的webpack版本配置，打包的時候，都是用的全局webpack命令行，這樣會出一些問題的。
但是局部安裝之後，執行webapck 命令行的時候會出現：‘webapck’ 不是內部或外部命令，也不是可運行的程序或批處理文件。這樣的提示。
解決辦法：
"scripts": {
"server":"webpack-dev-server",
"webpack":"webpack"
},
然後執行npm run webpack搞定！
入門完成若需要調試代碼則需要用到source-map
方法一：
webpack --devtool source-map
方法二：在配置文件webpack.config.js裏添加 devtool:‘source-map’,然後直接webpack就好啦
var webpack = require('webpack');
module.exports = {
entry: "./runoob1.js",
output: {
path: __dirname,//和入口文件相同的路徑
filename: "bundle.js"
},
devtool:'source-map',
//處理css文件
module: {
loaders: [
{ test: /\.css$/, loader: "style-loader!css-loader" }
]
},
plugins:[
new webpack.BannerPlugin('菜鳥教程 webpack 實例')
]
};
兼容Es6要用到babel
cnpm install --save-dev babel-loader babel-core babel-preset-env
若包以上錯誤也需要進行以上安裝
如果安裝有問題，則卸載重新安裝
cnpm i -D babel-loader
cnpm i -D @babel/core
@babel/preset-env
webpack.config.js文件爲
var webpack = require('webpack');
module.exports = {
entry: "./runoob1.js",
output: {
path: __dirname,//和入口文件相同的路徑
filename: "bundle.js"
},
//處理css文件
// module: {
// loaders: [
// { test: /\.css$/, loader: "style-loader!css-loader" }
// ]
// },
module: {
rules: [
{
test: /\.js$/, exclude: /node_modules/, loader: "babel-loader"
// test 符合此正則規則的文件，運用 loader 去進行處理，除了exclude 中指定的內容
}
]
},
plugins:[
new webpack.BannerPlugin('菜鳥教程 webpack 實例')
]
};
.babelrc文件爲
{
"presets": ["env"]
}