webpack实现模块化开发

模块化开发

es6的模块化

在script的引用中使用type="module"进行定义

导出与导入：

export {flag,sum}

import {flag,sum} from “./aaa.js”

webpack打包

前端资源模块化管理与打包工具，可以将许多松散的模块依照依赖与规则进行报打包成符合生产环境部署的前端资源，还可以将许多松散的模块进行分割，等到实际需要的时候异步加载

使用：在命令行 webpack main.js dist/bundle.js 目标路径 存放路径

只需要在html中引用bundle.js文件即可，可以自动实现对js文件下各种依赖关系

局部安装webpack

cd 对应目录

npm install webpack@3.6.0 --save-dev

全局安装

npm install webpack@3.6.0

loader

在开发中不仅仅有基本的js代码处理，也需要加载css、图片、也暴扣一些es6转化成es5代码等对于webpack来说这些功能是不支持的，但是拓展相应的loader就可以了。

使用步骤：1.通过npm安装需要使用的loader 2.在webpack.config.js中的module关键字下进行配置

对于style的loader
对于css的loader
对于图片采用file-loader
将es6语法转化成es5语法  babel-loader
npm install style-loader@0.23.1 --save-dev 
npm install css-loader@2.0.2 --save-dev 
npm install --save-dev babel-loader@7 babel-core babel-preset-es2015
在webpack.config.js中进行相应配置
modeule:{
	rules:[
		{
			test:/\.css$/,
			use:["style-loader","css-loader"]
		}
	]
}

在main.js下对样式进行依赖
//依赖css
require("./css/normal.css")
// 依赖less
require("./css/special.less")

项目配置

package.json 通过npm init与npm install生成，npm包的管理工具

在script中可以定义相应命令，

{
  "name": "meetwebpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^3.6.0"
  }
}

新建一个webpack.config.js就可以是实现webpack自动命令打包

const path=require("path")
module.exports={
    entry:"./src/main.js",
    output:{
        path: path.resolve(__dirname,"dist"),
        filename:"bundle.js"
    },
}

模块化VUE

在npm中安装vue模块，自动在node_modules中生成（npm install vue --save）

后续使用import Vue from "vue"即可

会出现该错误
[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

解决方法：在webpack的配置中添加
resolve:{
	alias:{
		'vue$':'vue/dist/vue.esm.js'
	}
}

采用.vue进行组件化开发 html与main.js中都不涉及到vue的具体实现，在.vue文件中进行编写 （需要安装vue-loader 与vue-template-compiler）

app.vue文件
<template>
	<div>
		<h2 class="title">{{message}}</h2>
		<button @click="btnclick">按钮</button>
		<Cpn></Cpn>
	</div>
</template>

<script>
	import Cpn from './Cpn.vue'
	export default{
		name:'app',
		components:{
			Cpn
			},
		data(){
			return{
				message:"hello world"
			}
		},
		methods:{
			btnclick(){
				
			}
		},
	}
</script>

<style scoped="">
	.title{
		color: #004444;
	}
</style>

在main.js中只需要引用该组件即可 
import app from "./vue/app.vue"

plugin（插件 ）

对webpack现有的功能进行扩充

webpack版权声明插件

webpack.config.js中配置
const webpack=require('webpack')
在module.exports中添加
plugins:[
	new webpack.BannerPlugin('最终版权归lexie所有')
]

打包html的pluggin

安装 npm install html-webpack-plugin@3.2.0 --save-dev
webpack.config.js中配置
const HtmlWebpackPlugin=require('html-webpack-plugin')
在module.exports中添加
plugins:[
	new webpack.BannerPlugin('最终版权归lexie所有')
	new HtmlWebpackPlugin({
	template:'index.html'
	})
]

对js代码进行丑化（压缩体积发布时有用）

npm install uglifyjs-webpack-plugin@1.1.1 --save-dev
webpack.config.js中配置
const UglifyjsWebpackPlugin=require('uglifyjs-webpack-plugin')
在module.exports中添加
plugins:[
	new webpack.BannerPlugin('最终版权归lexie所有'),
	new HtmlWebpackPlugin({
	template:'index.html'
	}),
	new UglifyjsWebpackPlugin()
]

热部署（本地服务器）

npm install --save-dev webpack-dev-server@2.9.1
在module.exports中添加
devServer:{
	contentBase:"./dist",
	inline:true,
	port:8080
}

两种方式打开
1：.\node_modules\.bin\webpack-dev-server
2.在package.json中配置脚本 "dev":"webpack-dev-server --open"   后使用npm run dev 打开

配置的分离

需要两个配置：开发环境与发布打包环境

在根目录下新建build文件夹
分三个config文件
base dev prod
最后按需整合

npm install webpack-merge --save-dev

《dev.config.js》
const webpackMerge=require('webpack-merge')
const baseconfig=require('./base.config.js')
module.exports=webpackMerge(baseconfig,{
	devServer:{
		contentBase:"./dist",
		inline:true,
		port:8081,
	}

《prod.config.js》
const webpackMerge=require('webpack-merge')
const UglifyjsWebpackPlugin=require('uglifyjs-webpack-plugin')
const baseconfig=require('./base.config.js')
module.exports=webpackMerge(baseconfig,{
	plugins:[
		new UglifyjsWebpackPlugin()
	]
})



在package.json中修改build与dev
"build": "webpack --config ./build/prod.config.js",
"dev": "webpack-dev-server --open --config ./build/dev.config.js"