1. 程式人生 > >Webpack4.x安裝與使用入門

Webpack4.x安裝與使用入門

安裝

在全域性安裝webpack

npm install -g webpack

建立專案

建立新資料夾webpack-study,用於存放專案。命令列定位到該資料夾下。輸入以下命令進行初始化。

npm init

然後根據專案情況配置選項或直接回車。

此時發現在該資料夾內新增了一個package.json檔案。

安裝webpack依賴包

npm install --save-dev webpack
此時多了node_modules資料夾。

在webpack-study資料夾下建立兩個資料夾,app和public。

並分別建立以下檔案。

module.exports = function() {
	let greet = document.createElement('div');
	greet.textContent = 'Hi winnw!';
	return greet;
}

const greeter = require('./Greeter.js');
document.querySelector("#root").appendChild(greeter());
<!DOCTYPE html>
<html>
<head>
	<mata charset="utf-8">
	<title>my first webpack</title>
</head>
<body>
	<div id="root">
		hello world!
	</div>
	<script type="text/javascript" src="bundle.js"></script>
</body>
</html>

建立webpack.config.js

// __dirname是node.js的全域性變數,它指向當前執行指令碼所在的目錄。
module. exports ={
  devtool: 'eval-source-map',
  entry:__dirname + '/app/main.js',
  output:{
    path:__dirname+'/public',
    filename:'bundle.js'
  },
  mode:'development',
  devServer: {
    contentBase: "./public",//本地伺服器所載入的頁面所在的目錄
    historyApiFallback: true,//不跳轉
    inline: true//實時重新整理
  } /*,
  module:{
    loaders:[
    {
      test:/\.css$/,
      loaders:['style-loader','css-loader']
  	}
  	]

  }*/
}

打包

webpack
低版本的webpack可能可以成功,但我的版本是4.x,提示以下資訊:
The CLI moved into a separate package:webpack-cli.
Please install 'webpack-cli' in addition to webpack itself to use the CLI.
->when using npm: npm install webpack-cli -D
->when using yarn: yarn add webpack-cli -D
由於我們的webpack是安裝在全域性,因此webpack-cli也裝到全域性。
npm install -g webpack-cli
繼續執行webpack,成功!

可在public資料夾下看到buddle.js