webpack打包基本使用

关于模块化的好处什么、其他的如：AMD、CMD、CommonJS等模块化的介绍、规范这里就不多说了，直接就说现在流行的ES6模块化及webpack打包的基本使用。

ES6模块化规范：

1、每个js文件都是一个独立的模块；
2、导入模块成员使用import关键字；
3、暴露模块成员使用export关键字；

ES模块化的基本语法：

默认导入和默认导出：

a、默认导出语法：export default 默认导出的成员
b、默认导入语法：import 接收名称 from '模块标识符'

//定义私有成员a和c
let a = 10;
let c = 20;
//外界访问不到变量d 因为它没有暴露出来
let d = 30;
function show() {

}
//将本模块中的私有成员暴露出去，供其他模块使用
//注意：在每个模块中，只允许使用唯一的一次export default，否则会报错
export default {
    a,
    c,
    show,
}

在js文件中默认导出：

//导入模块成员
import m1 from './js/m1.js'
console.log(m1);

注意：每个模块中，只允许使用唯一的一次export default，否则会报错。

按需导入和按需导出

a、按需导出语法：export let s1=10;
b、按需导入语法：import {s1} from '模块标识符'；

//每个模块中，可以使用多次按需导出
//向外按需导出变量
export let s1='aaaa';
export let s2='bbbbb';
//向外导出方法
export function say() {

}

在js文件中按需导入：

//如果想修改导入是的名称可以使用as 
import {s1,s2 as ss2,say} from './js/m2.js'

console.log(s1);
//通过as修改了导入的名称 s2就不能使用 需要使用ss2
console.log(ss2);

如果在同一个js文件中有默认和按需导出，使用时也存在默认和按需导入可以使用以下方式：

//m1 是按照默认导入的  {}是按照需要导入的
import m1,{} from './src/js/m1.js'

直接导入并执行模块代码

如果只想单纯执行某个模块中的代码，并不需要得到模块中向外暴露的成员，可以使用直接导入并执行模块代码。
直接导入并执行模块代码语法：import '模块标识符'

for (let i = 0; i < 10; i++) {
    console.log(i);
}

在js文件中直接导入并执行模块代码：

import './js/m3.js'

下面是一个通过jQuery实现的隔行变色的简单案例：
a、新建项目空白目录，并运行npm init -y命令，初始化包管理配置文件package.json
b、新建src源代码目录
c、新建scr->index.html首页
d、初始化首页基本的结构
f、运行npm install jquery -S 命令，安装jQuery
g、通过模块化的形式，实现列表隔行变色效果
index.html文件：

    
    



    
这是第1个li
    
这是第2个li
    
这是第3个li
    
这是第4个li
    
这是第5个li
    
这是第6个li
    
这是第7个li
    
这是第8个li
    
这是第9个li

index.js文件：

import $ from 'jquery'
$(function () {
    $("li:odd").css('backgroundColor','red');
    $("li:even").css('backgroundColor','blue');
})

在浏览器中打开index.html文件，发现并没得到想要的效果，在浏览器控制台看到了错误信息，这是因为使用了ES6模块化，浏览器不兼容导致的，这时就需要通过webpack对代码进行重新打包了。
webpack是一个流行的前端项目构建工具(打包工具)，可以很好的解决上面遇到的问题，它提供了友好的模块化支持，以及代码压缩混淆、处理js兼容问题、性能优化等强大功能，从而让程序员把工作的重心放到具体的功能实现上，提高了开发效率和项目的可维护性。

webpack官网地址

在项目中安装和配置webpack

a、运行npm install webpack webpack-cli -D命令，安装webpack相关的包；
b、在项目根目录中，创建名为webpack.config.js的webpack配置文件；
c、在webpack的配置文件webpack.config.js中，初始化如下基本配置：

module.exports={
    //mode指定构建模式
    //development 开发模式 不会对代码进行压缩 混淆等，编译速度快
    //production生成 对代码进行压缩 混淆等，编译速度慢
    mode:'development'
}

d、在package.json配置文件中的scripts节点下，新增dev脚本如下:

"scripts":{
    //初始化时就存在的
    "test": "echo \"Error: no test specified\" && exit 1",
    //新增webpack打包运行配置 通过npm run 执行
     "dev":"webpack"
}

e、在终端运行npm run dev命令，启动webpack进行项目打包
d、将index.htmljs文件的引入进行修改，修改为webpack打包输出的js文件路径

注意：
1、webpack打包默认入口是src/index.js文件，路径和文件不对，打包时会报找不到src/index.js相关的错误；
2、webpack打包默认输出为dist/main.js；

配置打包的入口和出口

webpack的4.x版本中默认约定：
a、打包的入口文件为src->index.js
b、打包的输出文件为dist->main.js
如果要修改打包的入口和出口，可在webpack.config.js中新增如下配置：

const path=require('path');//导入node.js中专门操作路径的模块
module.exports={
    entry:path.join(__dirname,'./src/js/index.js'),//配置打包入口文件的路径
    output:{
        path:path.join(__dirname,'./dist'),//配置输出文件的存放路径
        filename:'bundle.js'//输出文件的名称
    }
}

配置webpack自动打包

通过上面的步骤，已经实现了webpack打包了，但是每次代码改动，都需要运行npm run dev命令进行打包，影响开发效率，通过下面可以配置webpack的自动打包，代码变动后就不用每次都运行npm run dev命令了。
a、运行npm install webpack-dev-server -D命令，安装支持项目自动打包的工具
b、修改package.json->scripts中的dev命令，如下：

"scripts":{
    "dev":"webpack serve"
}

c、将src->index.html中，script脚本的引用路径，修改为'/buldle.js'

d、运行npm run dev命令，重新进行打包
e、在浏览器中访问http://localhost:8080地址，查看自动打包效果
注意：
1、webpack-dev-server会启动一个实时打包的http服务器；
2、webpack-dev-server打包生成的输出文件，默认放到了项目根目录中，是放在内存中，是虚拟的，看不见的；
3、webpack4.x版本配置的是"dev":"webpack serve"，之前的配置是:"dev":"webpack-dev-server"；
这样就实现了webpack自动打包了，代码变动保存后，浏览器会时时更新，不过会发现使用浏览器打开http://localhost:8080地址时，还需要进入到src文件中的入口文件index.html才可打开看到效果，通过下面配置，可以在访问http://localhost:8080后，直接打开index.html入口文件。

配置html-webpack-plugin生成预览页面

a、运行npm install html-webpack-plugin -D命令，安装生成预览页面的插件；
b、修改webpack.config.js文件头部区域，添加如下配置信息：

//导入生成预览页面的插件 得到一个构造函数
const HtmlWebpackPlugin=require('html-webpack-plugin');
//创建插件的实例对象
const htmlPlugin=new HtmlWebpackPlugin({
    template:'./src/index.html',//指定要用到的模块文件
    filename:'index.html'//指定生成的文件名称，该文件存在于内存中，在项目的根目录
});

c、修改webpack.config.js文件中向外暴露的配置对象，新增如下配置节点

module.exports={
    //plugins数组是webpack打包期间会用到的一些插件列表
    plugins:[htmlPlugin]
}

通过上面配置就可以在访问http://localhost:8080时，直接访问index.html入口文件，看到效果了，但是如果想在执行完npm run dev命令后自动打开浏览器展示效果，可以按照下面的配置进行配置。

配置自动打包相关参数

package.json中的配置
--open 打包完成后自动打开浏览器页面
--host配置id地址
--port配置端口
修改package.json文件中的srcipts中的dev配置：

"scripts":{
    "dev":"webpack serve --open --host 127.0.0.1 --port 8888"
}

webpack中的加载器

在实际开发过程中，webpack默认只能打包处理.js后缀结尾的模块，其他非.js后缀结尾的模块，webpack默认处理不了，需要调用loader加载器才可以正常打包，否则会报错。
loader加载器可以协助webpack打包处理特定文件模块，比如：
less-loader可以打包处理.less相关的文件；
sass-loader可以打包处理.scss相关的文件；
url-loader可以打包处理css中与url路径相关的文件;

打包处理css文件

a、运行npm install style-loader css-loader -D命令，安装处理css文件的loader
b、在webpack.config.js的module->rules数组中，添加loader规则如下：

//所有第三方文件规模的匹配规则
module:{
    rules:[
        //其中test表示匹配的文件类型(正则表达式)
        //use 表示对应要调用的loader
        {test:/\.css$/,use:['style-loader','css-loader']}
    ]
}

注意：
1、use数组中所指定的loader顺序是固定的，顺序错乱会导致报错；
2、多个loader的调用顺序是：从后往前调用

打包流程是：

先将css的文件交给css-loader进行处理，处理完后，再交给style-loader进行处理，处理好后，如果前面没有对应的loader了，这时就会交给webpack进行打包css文件。

打包处理less文件

a、运行npm install less-loader less -D命令
b、在webpack.config.js的module->rules数组中，添加loader规则如下：

module:{
    rules:[
        {test:/\.less$/,user:['style-loader','css-loader','less-loader']}
    ]
}

注意：
安装less-loader必须要安装less，less-loader依赖于css-loader和style-loader

打包处理scss文件

a、运行npm install sass-loader node-sass -D命令
b、在webpack.config.js的module->rules数组中，添加loader规则如下：

module:{
    rules:[
        {test:/\.scss$/,use:['style-loader','css-loader','sass-loader']}
    ]
}

c、在webpack.config.js的module-rules数组中，修改css的loader规则如下：

module:{
    rules:[
        {test:/\.css$/,use:['style-loader','css-loader','postcss-loader']}
    ]
}

配置postCSS自动添加css的兼容前缀

a、运行npm install postcss-loader autoprefixer -D命令
b、在项目根目录中创建postcss的配置文件postcss.config.js，并初始化如下配置：

const autoprefixer=require('autoprefixer')//导入自动添加前缀的插件
module.exports={
      plugins:[autoprefixer]//挂载插件
}

c、在webpack.config.js的module->rules数组中，修改css的loader规则如下：

module:{
        rules:[
            {test:'/\.css$/',use:['style-loader','css-loader','postcss-loader']}
        ]
    }

打包样式表中的图片和字体文件

a、运行npm install url-loader file-loader -D命令，file-loader是url-loader的内置依赖项
b、在webpack.config.js的module->rules数组中，添加loader规则如下：

module:{
    rules:[
        //前面的是图片 后面的是字体
        {test:/\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,use:'url-loader?limit=16940'}
    ]
}

其中?之后的是loader的参数项，limit用来指定图片的大小，单位是字节(byte)，只有小于limit大小的图片，才会被转成base64图片，将图片文件转换为base64编码并载入浏览器能够减少http请求数，提高加载效率，但是会增大了js或html文件的体积。

打包处理js文件中的高级语法

a、安装babel转换器相关的包：npm install babel-loader @babel/core @babel/runtime -D
b、安装babel语法插件相关的包：npm install @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D
c、在项目根目录中，创建babel配置文件babel.config.js，并初始化配置如下：

module.exports={
    presets:['@babel/preset-env'],
    plugins:['@babel/plugin-transform-runtime','@babel/plugin-proposal-class-properties']
}

d、在webpack.config.js的module->rules数组中，添加loader规则如下：

module:{
    rules:[
        //exclude为排除项，表示babel-loader不需要处理node_modules中的js文件
        {test:/\.js$/,use:'babel-loader',exclude:/node_modules/}
    ]
}

Vue单文件组件

vue单文件的组成结构：

template:组件的模块区域
script:业务逻辑区域
style:样式区域

webpack中配置vue组件的加载器

a、运行npm install vue-loader vue-template-compiler -D命令，vue-template-compiler是vue-loader的内置依赖项
b、在webpack.config.js配置文件中，添加vue-loader的配置如下：

const VueLoaderPlugin=require('vue-loader/lib/plugin');
module.exports={
    module:{
        rules:[
            {test:/\.vue$/,ues:'vue-loader'}
        ]
    },
    plugins:[
        //创建插件实例
        new VueLoaderPlugin()
    ]
}

在webpack项目中使用vue

a、运行npm install vue -S 安装vue
b、在src-index.js入口文件中，通过import Vue from 'vue'来导入vue构造函数
c、创建vue实例对象，并指定要空的el区域
d、通过render函数渲染App根组件

//1、导入vue构造函数
import Vue from 'vue'
//2、导入app根组件
import App from '../components/App.vue'
const vm=new Vue({
    //3、指定vm实例要控制的页面区域
    el:'#app',
    //4、通过render函数，把指定的组件渲染到el区域中
    render:h->h(App)
});

代码地址