webpack4+babel7入門到精通(1、環境的搭建)

時間 2019-11-06

標籤 webpack4+babel7 webpack babel 入門精通環境搭建简体版

原文原文鏈接

一直使用webpack,上次也分享過webpack配置es6~9的語法參考連接,可是對於一些小白童鞋來講,最基本的配置都不太知道,恰好利用春節休假期間對webpack4的知識點梳理一次。方便一些剛剛入行的人學習,也是對本身的一種總結與提升javascript

1、幾個盲點的解釋

一、全局安裝與局部安裝html
- 對於通常的新手都有一個疑惑我是全局安裝仍是本項目中安裝(局部安裝),我的建議,如今前端發展那麼快,咱們使用局部安裝的方式更好(使用最新的技術棧)。
- 咱們知道javascript是弱語言,有局部變量和全局變量,其實全局安裝與局部安裝的性質與函數的全局變量與局部變量有點相似。
二、安裝包的時候--save與-D的區別前端
通常咱們僅僅是在開發環境依賴的包直接使用-D就能夠,這樣就會在項目的package.json文件中的devDependencies新增相關的配置信息java
```
npm install webpack webpack-cli -D
複製代碼
```
--save是會放在package.json文件的dependencies中webpack
記住僅僅是開發環境須要使用的包就使用-Des6

2、`webpack`所謂的0配置使用

webpack是基於配置的前端腳手架,在實際項目中開發須要配置你須要的插件與加載器。web

一、webpack最基本的基重要的是:shell
plugins:配置插件的npm
module:主要配置一些加載器json
二、初始化項目
建立一個文件夾webpack-demo
初始化生成package.json文件
```
npm init --yes
複製代碼
```

三、安裝webpack最基本的依賴包

npm install webpack webpack-cli -D
複製代碼

四、建立一個文件夾src並在裏面建立一個index.js的文件
五、在命令行中運行(先忽視警告信息)
```
npx webpack
複製代碼
```
六、在生成的dist文件夾下會生成一個大包好的main.js文件,在該文件夾下建立一個index.html文件引入main.js,在瀏覽器中查看控制檯是否輸出信息。

2、`webpack`的配置

一、在項目下建立一個webpack.config.js文件

二、能夠配置的有

const path = require('path');

module.exports = {
  entry: '',  // 打包文件的入口
  output: {}, // 打包後的出口文件配置
  devServer: {}, // 開發服務器
  module: {}, // 模塊配置
  plugins: {}, // 插件的配置
  mode: 'development', // ['development', 'production']模式
  resolve: {}, // 配置解析
}
複製代碼

3、配置開發環境(在內存中打包)

一、安裝包

npm install webpack-dev-server -D
複製代碼

二、在webpack.config.js中配置入口文件與出口文件

module.exports = {
  entry: './src/index.js',  // 打包文件的入口
  output: {
    filename: 'build.js',
    // 注意這個位置必須是絕對路徑
    path: path.join(__dirname, 'dist')
  },
  ...
}
複製代碼

三、配置開發devServer

module.exports = {
  ...
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    port: 8000,
    compress: true, // 自動壓縮
    open: true, // 自動打開瀏覽器
  },
}
複製代碼

四、在package.json中配置命令

...
"scripts": {
	"dev": "webpack-dev-server",
},
...
複製代碼

五、調試性的運行命令(會自動打開瀏覽器,可是裏面沒任何信息展現)
```
npm run dev
複製代碼
```

六、使用html-webpack-plugin自動生成html頁面的插件

1.安裝包

npm install html-webpack-plugin -D
複製代碼

2.在webpack.config.js中引入

const HtmlWebpackPlugin = require('html-webpack-plugin');
複製代碼

3.在plugins中配置

plugins: [
	new HtmlWebpackPlugin({
		template: './src/index.html',
		title: 'webpack測試',
	})
],
複製代碼

4.關於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><%=htmlWebpackPlugin.options.title%></title>
</head>

<body>

</body>

</html>
複製代碼

5.關於html-webpack-plugin的配置請查看
六、運行npm run dev直接打開瀏覽器,打開控制檯能夠查看到打印信息

七、建立打包命令(在package.json中添加命令)

"scripts": {
	"dev": "webpack-dev-server",
	"build": "webpack"
},
複製代碼

八、使用哈希值的方式建立隨機生成數字,解決緩存的問題

一、對生成的js文件生成隨機數

output: {
	filename: 'build.[hash].js', // 默認生成20位的哈希值
	// filename: 'build.[hash:8].js' 能夠定製生成多少位的隨機數
	// 注意這個位置必須是絕對路徑
	path: path.join(__dirname, 'dist')
},
複製代碼

二、對html裏面引入的js生成哈希值(會生成?哈希值)

plugins: [
	new HtmlWebpackPlugin({
		template: './src/index.html',
		title: 'webpack測試',
		hash: true,
	})
],
複製代碼

三、運行命令npm run build能夠查看dist文件夾下的文件是否帶了尾巴(注意點:要更新文件打包會生成新的,若是沒改動文件,僅僅是屢次打包是同樣的)

四、運行後的效果

<script type="text/javascript" src="build.1ac0ed4b.js?1ac0ed4bfca95df7576e"></script>	
複製代碼

九、關於html-webpack-plugin其它經常使用的配置

new HtmlWebpackPlugin({
  ...
  minify: {
    removeAttributeQuotes: true, // 去除雙引號
    collapseWhitespace: true, // 合併代碼到一行
  }
})
複製代碼

4、清除以前的`plugin`的插件的使用

咱們對每次打包後的緩存文件進行刪除確保每次都是最新的

一、安裝

npm install clean-webpack-plugin -D
複製代碼

二、在webpack.config.js中使用

const CleanWebpackPlugin = require('clean-webpack-plugin');
plugins: [
	new CleanWebpackPlugin(['./dist']),
	...
],
複製代碼

5、關於`webpack`入口文件的幾種方式

一、單一入口文件(參考上面)

二、多入口文件(能夠寫成一個數組),共同打包帶一個出口文件中

module.exports = {
  mode: 'development',
  entry: [
    './src/index.js',
    './src/a.js'
  ],
  output: {
    filename: 'build.[hash:8].js',
    // 注意這個位置必須是絕對路徑
    path: path.join(__dirname, 'dist')
  }
}
複製代碼

三、多入口多出口多模板的模式

1.入口文件與出口文件的配置

module.exports = {
  mode: 'development',
  entry: {
    index: './src/index.js',
    a: './src/a.js'
  },
  output: {
    filename: '[name].[hash:8].js',
    path: path.join(__dirname, 'dist')
  }
}
複製代碼

2.模板的配置(須要註明輸出文件的名字)

...
plugins: [
    new CleanWebpackPlugin(['./dist']),
    new HtmlWebpackPlugin({
      filename: 'index.html', // 註明打包後的文件名
      template: './src/index.html',
      title: 'webpack測試1',
      hash: true,
      chunks: ['index']  // 註明選擇哪一個js文件
    }),
    new HtmlWebpackPlugin({
      filename: 'a.html',
      template: './src/index.html',
      title: 'webpack測試2',
      hash: true,
      chunks: ['a']
    })
  ],
}
...
複製代碼

3.若是文件不少,能夠採用讀取文件的方式

...
// 定義入口文件
let entry = {};
const glob = require("glob");
let HtmlPlugin = [];

glob.sync('./src/*.html').forEach(item => {
	const filename = path.basename(item).toLowerCase();
	const chunk = filename.replace('.html', '');
	entry[chunk] = `./src/${chunk}.js`;
	HtmlPlugin.push(
		new HtmlWebpackPlugin({
			filename: filename,
			template: path.resolve(item),
			inject: 'body',
			title: 'webpack測試',
			chunks: [chunk],
			hash: true,
			minify: {
				removeAttributeQuotes: true, // 去除引號
				collapseWhitespace: false, // true代碼合併成一行
			}
		})
	)
})
module.exports = {
	entry: entry, // 使用讀取的入口文件(注意文件不能少[html的和js的名字要一致])
	output: {
		path: path.join(__dirname, 'dist'),
		filename: '[name].[hash:8].js', // 會自動根據上面的name來取名字
	},
	devServer: {
		contentBase: path.join(__dirname, 'dist'),
		port: 8000,
		compress: false,
		open: true,
	},
	plugins: [
		new CleanWebpackPlugin(), // 每次打包清空dist文件夾
		...HtmlPlugin,
	],
	module: {},
	resolve: {}
}
複製代碼

6、`webpack`熱更新的使用

一、根據上面的方式咱們能夠實現,修改js代碼瀏覽器會刷新,可是是相似咱們人工的刷新(若是是有狀態機的數據的時候會丟失數據)
二、咱們可使用webpack自帶的一個熱更新的插件

三、使用方式

1.在webpack.config.js中配置

const webpack = require('webpack');
...
plugins: [
    new webpack.HotModuleReplacementPlugin(), // 每次修改代碼在開發環境的時候會自動刷新
    ...
]
...
複製代碼

2.在主要的入口index.js文件中加上

if (module.hot) {
  module.hot.accept();
}
複製代碼

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

webpack4+babel7入門到精通(1、環境的搭建)

1、幾個盲點的解釋

2、webpack所謂的0配置使用

2、webpack的配置

3、配置開發環境(在內存中打包)

4、清除以前的plugin的插件的使用

5、關於webpack入口文件的幾種方式

6、webpack熱更新的使用

2、`webpack`所謂的0配置使用

2、`webpack`的配置

4、清除以前的`plugin`的插件的使用

5、關於`webpack`入口文件的幾種方式

6、`webpack`熱更新的使用