webpack配置組件步驟

webpack配置組件步驟

1.建立項目目錄

|----webpackText
	|----dist
	|----src
		|----img
		|----js
		|----css
		|----index.html
		|----main.js

2.初始化項目npm init

3.安裝項目的[email protected]和[email protected].

npm install [email protected] --save-dev
npm install [email protected] --save-dev

4.在webpack中使用jQuery

npm install [email protected] --save

​ 4.1在main.js入口文件中導入jquery

//main.js
import $ from 'jquery';

​ 4.2打包文件,並引入

#如果沒有配置自動打包需要執行以下命令打包文件
webpack ./src/main.js -o ./dist/bundle.js
#然後在index.html裏面引入bundle.js

5.使用簡易命令webpack打包文件

​ 5.1在項目根目錄下新增webpack配置文 件, webpack.config.js

const path = require("path"); //因爲要手動指定文件路徑,需要使用到path模塊
module.exports = { //手動指定打包文件的入口和出口
	entry: path.join(__dirname,'./src/main.js'),//指定入口文件的路徑
	output:{
		path:path.join(__dirname,'./dist'),//指定打包好的文件要放到哪個目錄下
		filename:'bundle.js'   //打包好文件的文件名
	}
}

​ 5.2現在就可以執行webpack直接打包文件

6.使用webpack-dev-server這個工具,來實現自動打包編譯

#6.1安裝工具
npm i webpack-dev-server -D

6.2在package.json文件裏面配置scripts裏面加入dev這一行代碼,然後就可以在根目錄打開命令提示行輸入npm run dev啓動工具

注意:

這個要想正常使用,必須在本地項目中安裝webpack

packsge文件裏面不可以有註釋

打包好的文件存在內存中,如果不借助工具,需要手動打包

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
	"dev":"webpack-dev-server --open --port 3000 --hot"
  }

相關配置解釋

"dev":"webpack-dev-server --自動打開瀏覽器 --port 端口號 --contentBase 項目根目錄   --熱更新"

7.將html文件打包放在內存中

#7.1安裝工具
npm i [email protected] -D

7.2在webpack.config.js配置如下文件;帶*的區域是需要配置的,注意第二行也是

const path = require("path"); //因爲要手動指定文件路徑,需要使用到path模塊
const htmlWebpackPlugin = require('html-webpack-plugin');//**********************
module.exports = { //手動指定打包文件的入口和出口
	entry: path.join(__dirname, './src/main.js'), //指定入口文件的路徑
	output: {
		path: path.join(__dirname, './dist'), //指定打包好的文件要放到哪個目錄下
		filename: 'bundle.js' //打包好文件的文件名
	},
	// **********************************************************
	plugins: [
		//在內存中生成html的插件
		new htmlWebpackPlugin({ 
			 //選擇要加載的html
			template: path.join(__dirname, './src/index.html'),
			//指定生成HTML模板的名稱
			filename: 'index.html' 
		})
	],
	// ******************************************
}

8.處理css樣式表

8.1在css文件夾下簡建立css樣式表

8.2在mian.js裏面導入文件

import './css/index.css';

8.3安裝加載器,在項目根目錄打開命令提示行

npm i [email protected] -D
npm i [email protected] -D

8.4在webpack.config.js裏面配置如下帶*的行和區域;

const path = require("path"); //因爲要手動指定文件路徑,需要使用到path模塊
const htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = { //手動指定打包文件的入口和出口
	entry: path.join(__dirname, './src/main.js'), //指定入口文件的路徑
	output: {
		path: path.join(__dirname, './dist'), //指定打包好的文件要放到哪個目錄下
		filename: 'bundle.js' //打包好文件的文件名
	},
	plugins: [
		new htmlWebpackPlugin({
			template: path.join(__dirname, './src/index.html'),
			filename: 'index.html'
		})
	],
	// **************************************************
	module: { // 這個節點，用於配置 所有 第三方模塊 加載器 
		rules: [ // 所有第三方模塊的 匹配規則
			{test: /\.css$/,use: ['style-loader', 'css-loader']} //  配置處理 .css 文件的第三方loader 規則
		]
	},
	// ******************************************
}

9.處理less樣式表

9.1在css文件夾下建立less文件

9.2在main.js裏面導入文件

import './css/lesstext.less'

9.3在項目根目錄下打開命令提示行

npm i [email protected] -D
npm i [email protected] -D

9.4在webpack.config.js裏面配置如下帶*的行和區域;如果有其他規則,只需要加帶 *的一行

const path = require("path"); //因爲要手動指定文件路徑,需要使用到path模塊
const htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = { //手動指定打包文件的入口和出口
	entry: path.join(__dirname, './src/main.js'), //指定入口文件的路徑
	output: {
		path: path.join(__dirname, './dist'), //指定打包好的文件要放到哪個目錄下
		filename: 'bundle.js' //打包好文件的文件名
	},
	plugins: [
		new htmlWebpackPlugin({ 
			template: path.join(__dirname, './src/index.html'),
			filename: 'index.html' 
		})
	],
	
	module: { // 這個節點，用於配置 所有 第三方模塊 加載器 
	    rules: [ // 所有第三方模塊的 匹配規則
	      { test: /\.css$/, use: ['style-loader', 'css-loader'] } ,//  配置處理 .css 文件的第三方loader 規則
		  // ***************************************************
		  { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] } ,//配置處理 .less 文件的第三方 loader 規則
		  // ******************************************************
	    ]
	  }
}

10處理sass樣式表

10.1在css文件夾下建立scss文件

10.2在main.js裏面導入文件

import './css/scsstext.scss';

10.3在項目根目錄下打開命令提示行

cnpm i [email protected] -D
cnpm i [email protected] -D

10.4在webpack.config.js裏面配置如下帶*的行和區域;如果有其他規則,只需要加帶 *的一行

const path = require("path"); //因爲要手動指定文件路徑,需要使用到path模塊
const htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = { //手動指定打包文件的入口和出口
	entry: path.join(__dirname, './src/main.js'), //指定入口文件的路徑
	output: {
		path: path.join(__dirname, './dist'), //指定打包好的文件要放到哪個目錄下
		filename: 'bundle.js' //打包好文件的文件名
	},
	plugins: [
		new htmlWebpackPlugin({ 
			template: path.join(__dirname, './src/index.html'),
			filename: 'index.html' 
		})
	],
	
	module: { // 這個節點，用於配置 所有 第三方模塊 加載器 
	    rules: [ // 所有第三方模塊的 匹配規則
	      { test: /\.css$/, use: ['style-loader', 'css-loader'] } ,//  配置處理 .css 文件的第三方loader 規則
		  { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] } ,//配置處理 .less 文件的第三方 loader 規則
		// ***************************************************
			{ test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] } // 配置處理 .scss 文件的 第三方 loader 規則
		  // ******************************************************
	    ]
	  }
}

11webpack打包圖片

11.1在img文件夾下放一張圖片

11.2在樣式表裏面加載圖片路徑

body{
	background: green;
	div{
		background: url(../img/c01.png);
	}
}

11.3在項目根目錄下打開命令提示行

npm i [email protected]  -D
npm i [email protected] -D

11.4在webpack.config.js裏面配置如下帶*的行和區域;如果有其他規則,只需要加帶 *的一行

const path = require("path"); //因爲要手動指定文件路徑,需要使用到path模塊
const htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = { //手動指定打包文件的入口和出口
	entry: path.join(__dirname, './src/main.js'), //指定入口文件的路徑
	output: {
		path: path.join(__dirname, './dist'), //指定打包好的文件要放到哪個目錄下
		filename: 'bundle.js' //打包好文件的文件名
	},
	plugins: [
		new htmlWebpackPlugin({ 
			template: path.join(__dirname, './src/index.html'),
			filename: 'index.html' 
		})
	],
	
	module: { // 這個節點，用於配置 所有 第三方模塊 加載器 
	    rules: [ // 所有第三方模塊的 匹配規則
	      { test: /\.css$/, use: ['style-loader', 'css-loader'] } ,//  配置處理 .css 文件的第三方loader 規則
		  { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] } ,//配置處理 .less 文件的第三方 loader 規則
			{ test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] } ,// 配置處理 .scss 文件的 第三方 loader 規則
		// ***************************************************
			 { test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader?limit=1&name=[hash:8]-[name].[ext]' } // 處理 圖片路徑的 loader
		  // ******************************************************
	    ]
	  }
}

12webpack使用url-loader處理字體(使用bootatrap字體庫)

12.1安裝bootstrap3.3.7,注意要安裝有字體庫的bootatrap;3.3.7就會有

npm i [email protected] -S
#或者使用	cnpm i [email protected] -S

12.2在index.html中正確使用字體

12.3在main.js文件裏面導入文件

import '../node_modules/bootstrap/dist/css/bootstrap.css'

12.4在webpack.config.js裏面配置如下帶*的行和區域;如果有其他規則,只需要加帶 *的一行

const path = require("path"); //因爲要手動指定文件路徑,需要使用到path模塊
const htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = { //手動指定打包文件的入口和出口
	entry: path.join(__dirname, './src/main.js'), //指定入口文件的路徑
	output: {
		path: path.join(__dirname, './dist'), //指定打包好的文件要放到哪個目錄下
		filename: 'bundle.js' //打包好文件的文件名
	},
	plugins: [
		new htmlWebpackPlugin({ 
			template: path.join(__dirname, './src/index.html'),
			filename: 'index.html' 
		})
	],
	
	module: { // 這個節點，用於配置 所有 第三方模塊 加載器 
	    rules: [ // 所有第三方模塊的 匹配規則
	      { test: /\.css$/, use: ['style-loader', 'css-loader'] } ,//  配置處理 .css 文件的第三方loader 規則
		  { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] } ,//配置處理 .less 文件的第三方 loader 規則
			{ test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] } ,// 配置處理 .scss 文件的 第三方 loader 規則
			 { test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader?limit=1&name=[hash:8]-[name].[ext]' },// 處理 圖片路徑的 loader
		// ***************************************************
			  { test: /\.(ttf|eot|svg|woff|woff2)$/, use: 'url-loader' } // 處理 字體文件的 loader 
		  // ******************************************************
	    ]
	  }
}

13在webpack中使用babel將高級語法轉換爲低級語法

13.1在項目根目錄下打開命令提示行

npm i [email protected]  -D
npm i [email protected]  -D
npm i [email protected] -D
npm i [email protected] -D
npm i [email protected] -D

13.2在webpack.config.js裏面配置如下帶*的行和區域;如果有其他規則,只需要加帶 *的一行

const path = require("path"); //因爲要手動指定文件路徑,需要使用到path模塊
const htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = { //手動指定打包文件的入口和出口
	entry: path.join(__dirname, './src/main.js'), //指定入口文件的路徑
	output: {
		path: path.join(__dirname, './dist'), //指定打包好的文件要放到哪個目錄下
		filename: 'bundle.js' //打包好文件的文件名
	},
	plugins: [
		new htmlWebpackPlugin({ 
			template: path.join(__dirname, './src/index.html'),
			filename: 'index.html' 
		})
	],
	
	module: { // 這個節點，用於配置 所有 第三方模塊 加載器 
	    rules: [ // 所有第三方模塊的 匹配規則
	      { test: /\.css$/, use: ['style-loader', 'css-loader'] } ,//  配置處理 .css 文件的第三方loader 規則
		  { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] } ,//配置處理 .less 文件的第三方 loader 規則
			{ test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] } ,// 配置處理 .scss 文件的 第三方 loader 規則
			 { test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader?limit=1&name=[hash:8]-[name].[ext]' },// 處理 圖片路徑的 loader
			  { test: /\.(ttf|eot|svg|woff|woff2)$/, use: 'url-loader' }, // 處理 字體文件的 loader 
		// ***************************************************
			  { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ } // 配置 Babel 來轉換高級的ES語法
			  //如果不配置exclude: /node_modules/     webpack會把所有的js打包
		  // ******************************************************
	    ]
	  }
}

13.3在項目根目錄下新建一個文件叫 .babelrc的文件,加入以下內容

{
  "presets": ["env", "stage-0"],
  "plugins": ["transform-runtime"]
}

14在webpack中配置.vue組件頁面的解析

14.1在項目的根目錄,打開命令提示行

npm i [email protected] -S
npm i [email protected]  -D
npm i [email protected] -D
cnpm i [email protected]  -D
cnpm i [email protected] -D

14.2在main.js導入文件

import Vue from '../node_modules/vue/dist/vue.js';

14.3在webpack.config.js裏面配置如下帶*的行和區域;如果有其他規則,只需要加帶 *的一行

const path = require("path"); //因爲要手動指定文件路徑,需要使用到path模塊
const htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = { //手動指定打包文件的入口和出口
	entry: path.join(__dirname, './src/main.js'), //指定入口文件的路徑
	output: {
		path: path.join(__dirname, './dist'), //指定打包好的文件要放到哪個目錄下
		filename: 'bundle.js' //打包好文件的文件名
	},
	plugins: [
		new htmlWebpackPlugin({ 
			template: path.join(__dirname, './src/index.html'),
			filename: 'index.html' 
		})
	],
	
	module: { // 這個節點，用於配置 所有 第三方模塊 加載器 
	    rules: [ // 所有第三方模塊的 匹配規則
	      { test: /\.css$/, use: ['style-loader', 'css-loader'] } ,//  配置處理 .css 文件的第三方loader 規則
		  { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] } ,//配置處理 .less 文件的第三方 loader 規則
			{ test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] } ,// 配置處理 .scss 文件的 第三方 loader 規則
			 { test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader?limit=1&name=[hash:8]-[name].[ext]' },// 處理 圖片路徑的 loader
			  { test: /\.(ttf|eot|svg|woff|woff2)$/, use: 'url-loader' }, // 處理 字體文件的 loader 
			  { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }, // 配置 Babel 來轉換高級的ES語法
			  //如果不配置exclude: /node_modules/     webpack會把所有的js打包
		// ***************************************************
		  { test: /\.vue$/, use: 'vue-loader' } // 處理 .vue 文件的 loader
		  // ******************************************************
	    ]
	}
	
}

14.4實例

main.js

import Vue from 'vue'
import login from './login.vue'

var vm = new Vue({
  el: '#app',
  data: {
    msg: '123'
  },
  render: c => c(login)
})

login.vue

<template>
  <div>
    <h1>這是登錄組件，使用 .vue 文件定義出來的 --- {{msg}}</h1>
  </div>
</template>

<script>
export default {
  data() {
    // 注意：組件中的 data 必須是 function
    return {
      msg: "123"
    };
  },
  methods: {
    show() {
      console.log("調用了 login.vue 中的 show 方法");
    }
  }
};
</script>

<style>

</style>

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>Document</title>
</head>

<body>
  <!-- 這是容器 -->
  <div id="app">
    <p>{{msg}}</p>

    <login></login>

  </div>
</body>

</html>

15在vue組件頁面中，集成vue-router路由模塊

15.1在根目錄下打開命令提示行;

npm i [email protected] -S

15.2在main.js文件中導入文件

import VueRouter from 'vue-router';
Vue.use(VueRouter);

15.3創建一個叫app.vue的組件

<template>
	<div>
		<router-link to="/account">account組件</router-link>
		<router-link to="/goodlist">goodlist組件</router-link>
		<router-view></router-view>
	</div>
</template>

<script>
	export default {
		data() {
			// 注意：組件中的 data 必須是 function
			return {
				msg: "123"
			};
		},
		methods: {
			show() {
				console.log("調用了 login.vue 中的 show 方法");
			}
		}
	};
</script>

<style>

</style>

15.4創建一個叫account.vue的組件

<template>
	<div>
		<h2>這是account組件</h2>
	</div>
</template>

<script>
</script>

<style>
</style>

15.5創建一個叫goodlist.vue的組件

<template>
	<div>
		<h2>這是goodlist組件</h2>
	</div>
</template>

<script>
</script>

<style>
</style>

15.6,創建router實例;

var router = new VueRouter({
	routes:[
		{path:'/account',component:account},
		{path:'/goodlist',component:goodlist}
	]
})

15.7在vm實例生掛載路由模塊

15.8導入上述三個vue組件

import app from './app.vue'
import account from './account.vue'
import goodlist from './goodlist.vue'

15.9最終的main.js

import Vue from 'vue'
import VueRouter from 'vue-router';
import app from './app.vue'
import account from './account.vue'
import goodlist from './goodlist.vue'
Vue.use(VueRouter);
var router = new VueRouter({
	routes:[
		{path:'/account',component:account},
		{path:'/goodlist',component:goodlist}
	]
})
var vm = new Vue({
  el: '#app',
  data: {
    msg: '123'
  },
  render: c => c(app),
  router
})

15.10最終的heml頁面

<!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>Document</title>
</head>

<body>
  <!-- 這是容器 -->
  <div id="app">

  </div>
</body>

</html>

16創建子路由;

16.1在上面的路由實例上修改,增加二級路由

var router = new VueRouter({
	routes:[
		{path:'/account',component:account,
		children:[
			{path:'login',component:login},
			{path:'register',component:register}
		]},
		{path:'/goodlist',component:goodlist}
	]
})

16.2創建login.vue和register.vue組件;

<template>
	<div>
		<h2>登錄組件</h2>
	</div>
</template>

<script>
</script>

<style>
</style>

<template>
	<div>
		<h1>註冊路由</h1>
	</div>
</template>

<script>
</script>

<style>
</style>

16.3將兩個組件導入main.js

import login from './login.vue'
import register from './register.vue'

16.4修改account.vue組件

<template>
	<div>
		<h2>這是account組件</h2>
		<router-link to="/account/login">登錄組件</router-link>
		<router-link to="/account/register">註冊組件</router-link>
		<router-view></router-view>
	</div>
</template>

<script>
</script>

<style>
</style>

16.5修改組件樣式

<template>
	<div>
		<h2>登錄組件</h2>
	</div>
</template>

<script>
</script>

<style scoped="scoped" lang="scss">
    /* scoped="scoped"  表示這個樣式只有這個組件私有   lang="scss"  表示支持scss語法*/
	div{
		color: red;
		h2{
			color: red;
		}
	}
</style>