webpack3.X的學習

時間  2019-11-10
標籤 webpack3.x webpack 學習 简体版
原文   原文鏈接

 文章說明，這篇主要是記錄一下我學習的過程。以代碼爲主。一些概念啊，插件的用途說明啊不作任何說明。有任何不明白的請參照webpack中文官網https://doc.webpack-china.org/。這裏以webpack版本爲3.X爲主。記住，版本很重要。javascript

webpack已升級到4版本，部分設置可能跟個人配置有些出入。可是原理方法是不變的。css

假如跟着作出現問題了：一、看看有沒有提示語法錯誤，而且檢查本身的代碼有沒有字母錯漏的，初次接觸容易出現這類問題 二、假如沒有錯誤，換個端口號試試   三、去谷歌搜問題的緣由。html

全部的項目文件均可如下載。下載後運行npm i,而後再npm startjava

下載地址 連接：https://pan.baidu.com/s/1eYR75D8QEd6PleAeZQDWYQ 密碼：kcy6node

1、初識webpack---打包工具。項目一react

 一、建立文件，而後新建以下圖1的文件，而後文件的內容按照個人截圖進行輸入代碼。這裏我新建了名爲320webpack的項目webpack

  ---es6

 

好了，而後就可使用命令了，進入320webpack的項目文件夾裏，右鍵選擇Git Base Here，敲打如下命令web

npm init -y                                      //初始化項目，執行後會多一個package.json頁面npm

//安裝項目依賴，這裏安裝3.0版本的webpack,執行後會多了node_modules文件夾，裏面放的都得項目的依賴插件

//若是直接輸入npm i -D webpack ,最後會直接幫你安裝最新的版本。
npm i -D webpack@3                    

npm i -D html-webpack-plugin     //安裝html-webpack-plugin插件，用來打包時建立html頁面

而後進入package.json,

 

而後運行 npm run dev     //這是一個運行打包的命令

打包成功後能夠看到dist文件夾裏面多了2個文件，而後用瀏覽器運行dist/index.html文件，能夠看到輸出了內容

一個簡單的打包項目就完成了

 

2、loader--loader就是webpack用來預處理模塊的，在一個模塊被引入以前，會預先使用loader處理模塊的內容

　　而後會用到一些react的東西。

項目仍是以前的項目，刪掉a.js，b.js，c.js，而後按照截圖修改文件內的代碼

　　

 

運行如下命令

npm i -S react react-dom                //安裝react所須要的模塊

//瀏覽器只能跑js代碼，而顯然react的代碼顯然不是純js代碼，因此要使用babel-loader來幫助瀏覽器識別，而babel-loader依賴一個核心庫babel-core

npm i -D babel-loader babel-core

npm i -D babel-preset-react          //安裝預設

npm run dev      //運行，而後用瀏覽器運行dist/index.html文件

 到這裏就能夠了，這裏主要是要認識如下，loader--就是用來處理模塊內容的

3、devserver ----   webpack的開發服務器，這是專門用來給咱們開發調試項目的，使用後能夠直接在瀏覽器上運行咱們的項目

項目仍是以前的項目，而後按照截圖修改文件內的代碼

 

 運行如下命令

//webpack-dev-server會將項目進行打包，打包以後並不會將資源放到本地的文件夾內，而是放到內存裏面，當咱們訪問那個地址時，就會從內存中提取資源

 //安裝devserver，這裏由於webpack是3.x版本，因此這裏安裝webpack-dev-server的2.x版本。若是安裝其餘版本，運行彙報錯。若是直接輸入npm i -D webpack-dev-server，系統會自動安裝最新的版本，

npm i -D webpack-dev-server@2          

npm start     ---就會開始運行

按ctrl + C就能夠退出運行

運行後，咱們能夠看到他的運行地址是localhost+自定義端口號。而且默認瀏覽器會自動運行這個地址，

 

4、引入css文件

項目仍是以前的項目，而後按照截圖修改文件內的代碼

 

 運行如下命令

npm i -D css-loader                  //安裝css-loader
npm i -D style-loader                //安裝style-loader   ，這個的做用是把打包的樣式插入到頁面中

npm start                                  //運行以後就看到以下效果了

 

5、引入圖片

　　項目仍是以前的項目，而後按照截圖新建文件及修改文件內的代碼，自找幾張圖片，png，jpg，jpeg，gif的格式圖片各一張，而且圖片的內存大小不一

 

 

 運行如下命令

npm i -D url-loader                  ////安裝url-loader ，加強版的file-loader，用來處理文件的，好比圖片，在打包的時候會從新命名文件的文件名

npm start                                  //運行以後就看到以下效果了

npm run dev    　　　　　　 //打包

因爲我只有一張圖片是比較大的，因此我只有1張圖片被打包了

 

6、引入字體

 項目仍是以前的項目，而後按照截圖新建文件及修改文件內的代碼。去阿里巴巴矢量圖標，下載幾個圖標，將下載下來的文件所有複製到fonts文件夾內，下載下來的文件有教你怎麼使用這些字體圖標的方法。直接複製過來。

 

 

 運行如下命令

npm i -D file-loader                  //安裝file-loader ，用來處理文件的，好比圖片，在打包的時候會從新命名文件的文件名

npm start                                  //運行以後就看到以下效果了

6、引入字體二，

　　假如你不須要自定義字體圖標，直接使用font-awesome的字體圖標的話，能夠這麼作。

項目仍是以前的項目，而後按照截圖新建文件及修改文件內的代碼。刪掉fonts文件夾，運行

npm i -S font-awesome                 //下載font-awesome字體

下載後這個字體文件會被放在node_modules文件裏面，能夠在裏面進行查看。下載font-awesome以後，當你要使用某個字體的時候,能夠去它的官網http://fontawesome.dashgame.com/，找到對應的字體點進去，裏面會有使用該字體的方法，複製過來就行了。

而後 npm strat   。效果以下顯示

7、css模塊化

　　項目仍是以前的項目，而後按照截圖新建文件及修改文件內的代碼。

 

而後就能夠npm start 運行了。因爲咱們會引入node_module裏面的css文件，因此在配置文件裏相應的作了些處理。配置文件進行文件匹配處理的順序是從下往上，從右到左。

從輸出的結果能夠看出。在樣式進行模塊化以後，一、除了node_module裏面的樣式，其餘全部的樣式都要以對象接受的方式來引用。  二、對於與app.js同級的css文件，引入後，瀏覽器能接受到該文件的全部樣式對象，並能夠以對象的方式來使用樣式  三、對於與app.js非同級的css文件。瀏覽器接收不到其樣式對象。因此使用該文件的樣式時，仍是以直接使用樣式名的方式來使用纔有效。

 

 

8、使用sass和less

項目仍是以前的項目，而後按照截圖新建文件及修改文件內的代碼。

而後執行如下命令

npm i -S sass-loader node-sass 　　　　　　//下載sass-loader
npm i -S less-loader less　　　　　　　　　 //下載less-loader

npm start

 

9、優化babel-loader---主要是爲了兼容es6的語法

 項目仍是以前的項目，而後按照截圖新建文件及修改文件內的代碼。因爲主要是babel，因此就先將以前的一些樣式文件給刪掉了。

而後執行如下命令

npm i -D babel-preset-env　　　　　　 //安裝babel-preset-env 預設es

npm i -D babel-plugin-transform-object-rest-spread
npm i -D babel-preset-es2015

npm start        //結果以下，es6的語法也正常輸出

 

10、再次優化babel-loader

項目仍是以前的項目，而後按照截圖新建文件及修改文件內的代碼。

而後npm start，效果也是同樣的。

11、輸出路徑處理

項目仍是以前的項目，而後按照截圖新建文件及修改文件內的代碼。

 

const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
	entry: './src/app.js',
	output: {
		path: path.resolve(__dirname,'dist'),
		filename: 'js/app.js',
		//全部資源的基礎路徑，並且必定要以 "/"結尾
		publicPath: '/'             //會自動幫咱們應用上轉化以後的路徑
	},
	plugins: [
		new HtmlWebpackPlugin({
			filename: 'index.html',
			template: 'src/index.html'
		}),
		new CleanWebpackPlugin(['dist'])
	],
	module: {
		rules: [
			{
				test: /\.js$/,
				use: [{
					loader: 'babel-loader'
				}],
				exclude: [
					path.resolve(__dirname,'node_modules')
				]
			},
			{
				test: /\.css$/,
				use: [
					'style-loader',
					{
						loader: 'css-loader',
						options: {
							module: true,
							localIdentName: '[name]-[local]-[hash:base64:6]'
						}
					}
				],
				exclude: [
					path.resolve(__dirname,'node_modules'),
					path.resolve(__dirname,'src/common')
				]
			},
			{
				test: /\.css$/,
				use: ['style-loader','css-loader'],
				include: [
					path.resolve(__dirname,'node_modules'),
					path.resolve(__dirname,'src/common')
				]
			},
			{
				test: /\.scss$/,
				use: [
					'style-loader',
					{
						loader: 'css-loader',
						options: {
							module: true,
							localIdentName: '[name]-[local]-[hash:base64:6]'
						}
					},
					'sass-loader'
				],
				exclude: [
					path.resolve(__dirname,'node_modules'),
					path.resolve(__dirname,'src/common')
				]
			},
			{
				test: /\.scss$/,
				use: ['style-loader','css-loader','sass-loader'],
				include: [
					path.resolve(__dirname,'node_modules'),
					path.resolve(__dirname,'src/common')
				]                                                                                   
			},
			{
				test: /\.less$/,
				use: [
					'style-loader',
					{
						loader: 'css-loader',
						options: {
							module: true,
							localIdentName: '[name]-[local]-[hash:base64:6]'
						}
					},
					'less-loader'
				],
				exclude: [
					path.resolve(__dirname,'node_modules'),
					path.resolve(__dirname,'src/common')
				]
			},
			{
				test: /\.less$/,
				use: ['style-loader','css-loader','less-loader'],
				include: [
					path.resolve(__dirname,'node_modules'),
					path.resolve(__dirname,'src/common')
				]
			},
			
			{
				test: /\.(jpeg|png|gif|jpg)$/,
				use: [{
					loader: 'url-loader',
					options: {
						limit: 10000,
						name: 'img/[name]_[hash:8].[ext]'
					}
				}]
			},
			{
				test: /\.(ttf|woff|svg|eot|woff2)$/,
				 use: [{
                	loader: 'file-loader',
                	options: {
                		name: 'fonts/[name]_[hash:8].[ext]'
                	}
                }]
			}
			
		]
	},
	devServer: {
		open: true,
		port: 9666,
		contentBase: './src/common',
		
		publicPath: '/'     //指向資源被打包的地方
	}
}

npm i -D clean-webpack-plugin           //安裝清理插件

npm run dev     //打包，打包後自動生成dist文件夾，而且將字體文件放到fonts文件，圖片放到img文件夾，js放到js文件夾內。

npm start      //正常輸出了

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程