模块化开发工具webpack
1、模块化开发概述
前端的js代码如何复用，怎样避免多文件之间的命名冲突，前端开发中这之类的问题如何解决，答案是模块化开发。来看看模块化开发的好处吧
创建common公共模块a.js文件
var name='小明';
var age = 18;
var flag = true;
function sum(num1,num2){
return num1 + num2;
}
//导出方式一：对象
export {
flag,
sum
}
//导出方式二：变量
export var num = 1;
//导出方式三：方法
export function mul(num1,num2) {
return num1 * num2;
}
//导出方式四：类
export class Person {
run(){
console.log('奔跑')
}
}
//导出方法五：default（每个js文件只能导出一个默认的值）
//使用default关键字导出的数据，可以在import导入时自定义名称
const address = '北京市';
export default address;
以上a.js文件中使用export关键字导出我们需要在其它js文件中重用的属性，下面我们来创建b.js文件导入引用这些属性。
//导入
import {flag,sum} from "./aa.js";
import {num} from "./aa.js";
import {mul} from "./aa.js";
import {Person} from "./aa.js"
//导入默认的值
import addr from "./aa.js";
//统一全部导入
import * as a from './aa.js';
if(flag){
console.log("小明是天才")
}
console.log(num);
console.log(mul(2,3))
var p = new Person();
p.run()
console.log(addr)
console.log(a.flag)
最后，在项目中使用js文件。创建hello.html。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="../js/b.js" type="module">script>
head>
<body>
body>
html>
打开前端控制台即可看到引用的结果。需要注意的是，模块化开发是需要环境支持的，即export import的语法想要生效，需要将引入的js的type设置为model的，这样浏览器才能解析。且model模块化开发是ES6的新特性，也就是说ES6之前是不能解析这种语法的。
2、webpack 前端模块化打包工具
webpack最大的一个特点就是它能够将我们的通过AMD、CMD、Commons、ES6的规范编写的代码打包成浏览器能够识别的javascript代码，即作为模块化开发的底层支撑。
注意：webpack依赖于Node.js，Node js的各种包管理需要使用npm工具，在Nodejs安装的时候会自动下载
在控制台查看nodejs及webpack的版本
webpack的基本使用
使用webpack打包输出，在工程目录下打开cmd，运行以下命令。webpack以./src/index.js作为入口文件，-o是输出的意思，即打包输出到./build/built目录，且整体打包环境是开发环境。
webpack ./src/index.js -o ./build/built --mode=development
打包环境为生产环境
webpack ./src/index.js -o ./build/built --mode=production
配置webpack的入口文件与输出文件
在项目路径下编写webpack.config.js文件，以下配置的入口文件为./src/main，输出文件为（项目的绝对路径path）/dist/main.js
const path = require('path');
module.exports = {
entry: './src/main.js',
output:{
path: path.resolve(__dirname,'dist'),
filename:'main.js',
},
mode:'production'
}
初始化项目，控制台输入命令 npm init，package name取英文名称，其它一路Entry即可。
以上配置完成以后，使用webpack打包就只需要在控制台输出webpack即可。
使用本地的webpack
一般情况下我们的项目不会使用全局的webpack，而是使用本地的webpack工具。
我们在终端运行的webpack操作都是使用的全局webpack工具，那么如何使用本地webpack工具呢。
安装本地（项目）的webpack工具。
npm install [email protected] -save-dev
使用本地的webpack工具需要在package.json文件中配置
之后的打包操作我们不使用webpack命令（前面讲过webpack命令使用的都是全局webpack工具），而是使用npm run build命令，它才会去优先调用我们本地的webpack工具完成打包操作。
Loader
loader是webpack中一个非常核心的概念，我们知道webpack可以自动帮助我们处理js文件之间的依赖。webpack还可以帮我们将css、scss、less转css，将.jsx、.vue转成js文件等等，这些是webpack的扩展功能，需要使用对应的loder。
loader使用过程：
（1）npm安装对应的loader
（2）在webpack.config.js中的moudules关键字下进行配置。
例：安装css-loader与style-loader
npm install --save-dev css-loader@版本号
npm install --save-dev style-loader@版本号
安装成功之后在在webpack.config.js中添加配置即可使用
module: {
rules: [
{
test: /\.css$/,
//css loader只负责将css文件进行加载
//style loader负责将样式添加进DOM中
//使用多个loader时，是从右向左读
use: [ 'style-loader','css-loader' ]
}
]
}
用于处理css依赖的loader {‘css-loader’,‘style-loader’}
用于处理less依赖的loader{‘less-loader’}
用于处理图片文件依赖的loader{‘file-loader’,‘url-loader’]
用于将ES6转化为ES5代码的loader{‘babel-loader’}，其他依赖{‘babel-core’,‘babel-preset-es2015’}
总配置文件webpack.config.js
const path = require('path');
module.exports = {
entry: './src/main.js',
output:{
path: path.resolve(__dirname,'dist'),
filename:'main.js',
publicPath:'dist/'
},
module: {
rules: [
{
test: /\.css$/,
//css loader只负责将css文件进行加载
//style loader负责将样式添加进DOM中
//使用多个loader时，是从右向左读
use: [ 'style-loader','css-loader' ]
},
{
test: /\.less$/,
//css loader只负责将css文件进行加载
//style loader负责将样式添加进DOM中
//使用多个loader时，是从右向左读
use: ['style-loader','css-loader', 'less-loader']
},
{
test:/\.(jpg|jpeg|png|gif)$/,
use: [
{
loader:'url-loader',
options:{
limit:13000,
name:'img/[name].[hash:8].[ext]'
}
}
]
},
{
test: /\.js$/,
exclude:/(node_modules|bower_components)/,
use:{
loader: 'babel-loader',
options:{
presets:['es2015']
}
}
}
]
}
}
3、Plugin
html-webpack-plugin 用于自动生成一个index.html（可定制模板），且会在这个html引用我们的输出文件bundle.js。
安装开发环境用的html-webpack-plugin
npm install html-wenpack-plugin --save-dev
在webpack.config.js中添加配置
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
...,
plugins:[
new HtmlWebpackPlugin({
template:'index.html'//定制模板，找到webpack.config.js同级下的index.html作为模板
})
]
}
ugligyjs-webpack-plugin js压缩插件
webpack-dev-server 热部署，用于项目的快速测试
4、webpack的配置文件分离
要实现webpack的配置文件分离，要先下载webpack-merge包
npm install webpack-merge --save-dev
在项目目标下创建buid目录，创建webpack的基础配置文件config-base.js、开发时配置config-dev.js，发布时配置config-pro.js。
配置如下
config-base.js，注意打包输出地址要修改，输出地址的basepath始终为配置文件的目录，根据这个目录…/回退到自定义输出地址即可。
const path = require('path');
module.exports = {
entry: './src/main.js',
output:{
path: path.resolve(__dirname,'../dist'),
filename:'bundle.js'
// publicPath:'dist/'
},
module: {
rules: [
{
test: /\.css$/,
//css loader只负责将css文件进行加载
//style loader负责将样式添加进DOM中
//使用多个loader时，是从右向左读
use: [ 'style-loader','css-loader' ]
},
{
test: /\.less$/,
//css loader只负责将css文件进行加载
//style loader负责将样式添加进DOM中
//使用多个loader时，是从右向左读
use: ['style-loader','css-loader', 'less-loader']
},
{
test:/\.(jpg|jpeg|png|gif)$/,
use: [
{
loader:'url-loader',
options:{
limit:13000,
name:'img/[name].[hash:8].[ext]'
}
}
]
},
{
test: /\.js$/,
exclude:/(node_modules|bower_components)/,
use:{
loader: 'babel-loader',
options:{
presets:['es2015']
}
}
},
{
test: /\.vue$/,
use:['vue-loader']
}
]
},
mode:'development',
resolve:{
},
}
config-dev.js
const webpackMerge = require('webpack-merge')
const baseConfig = require('./config-base')
module.exports= webpackMerge.merge(baseConfig,{
// devServer:{
// contentBase: './dist',
// inline:true
// },
})
config-pro.js
const HtmlWebpackPlugin = require('html-webpack-plugin')
const webpackMerge = require('webpack-merge')
const baseConfig = require('./config-base')
module.exports= webpackMerge.merge(baseConfig,{
plugins:[
new HtmlWebpackPlugin({
template:'index.html'
})
]
})
修改packge.json的配置
"scripts": {
"build": "webpack --config ./build/config-pro.js";
}