Webpack的使用

一、了解Webpack

　　1、什么是webpack
　　　　Webpack是一个模块打包器(bundler)
　　　　在Webpack看来，前端的所有资源文件(js/json/css/img/less/...)都会作为模块处理。它将根据模块的依赖关系进行静态分析，生成对应的模态资源

　　2、理解Loader
　　　　Webpack本身只能加载JS/JSON模块，如果要加载其他类型的文件(模块)，就需要使用对应的loader进行转换/加载
　　　　Loader本身也是运行在node.js环境中的JavaScript模块，它本身是一个函数，接受源文件作为参数，返回转化的结果
　　　　loader一般以xxx-loader的方式命名，xxx代表了这个loader要做的转换功能，比如json-loader

　　3、配置文件
　　　　webpack.config.js：是一个node模块，返回一个json格式的配置信息对象

　　4、插件
　　　　插件可以完成一些loader不能完成的功能。插件的使用一般是在webpack的配置信息pluguins选项中指定

　　5、Webpack中文文档：https://www.webpackjs.com/concepts/

二、Webpack的简单使用

　　1、初始化项目
　　新建空项目，创建package.json文件，局部安装webpack(可选，安装过node会自动全局安装webpack)
　　package.json文件内容：
　　　　{
　　　　　　"name": "webpack_test",
　　　　　　"version": "1.0.0"
　　　　}

　　2、创建入口entry.js
　　　　入口函数中整合所有的资源

　　3、使用webpack配置文件

　　　　创建webpack.config.js

const path = require('path'); //path内置的模块，用来设置路径。

module.exports = {
    entry: './src/js/entry.js', // 入口文件
    output: { // 输出配置
        filename: 'bundle.js', // 输出文件名
        path: path.resolve(__dirname, 'dist') //输出文件路径配置
    }
};

　　　　在package.json文件中添加

"scripts": {
    "build": "webpack"
}

　　4、启动打包
　　　　webpack

三、打包css和图片文件

　　1、安装对应的loader

npm install css-loader style-loader --save-dev
npm install file-loader url-loader --save-dev
注：url-loader是对象file-loader的上层封装，使用时需配合file-loader使用。

　　2、在webpack.config.js中配置loader

module: {
    rules: [
        {
            test: /\.css$/,
            use: [
                'style-loader',
                'css-loader'
            ]
        },
        {
　　　　　　test: /\.(png|jpg|gif)$/,
　　　　　　use: [
　　　　　　　　{
　　　　　　　　　　loader: 'url-loader',
　　　　　　　　　　options: {
　　　　　　　　　　　　limit: 8192 
　　　　　　　　　　}
　　　　　　　　}
　　　　　　]
　　　　}
　　]
}            

　　3、入口函数entry.js中导入样式

　　4、问题

　　　　大图无法打包到entry.js文件中，会在资源目录下生成。ndex.html不在生成资源目录下时，页面加载图片会在所在目录位置查找，导致页面加载图片时候大图路径无法找到
　　　　解决办法：
　　　　　　①使用publicPath : 'dist/js/' //设置为index.html提供资源的路径,设置完后找所有的资源都会去当前目录下找，这种方法会导致无法使用热部署。
　　　　　　②将index.html放在dist/js/也可以解决。

四、测试环境下自动编译打包

　　利用webpack开发服务器工具: webpack-dev-server
　　安装：npm install --save-dev webpack-dev-server
　　在webpack.config.js中配置：

devServer: {
　　contentBase: 'dist/'
}

　　启动命令：webpack-dev-server

五、使用webpack插件

　　1、常用的插件

　　　　使用html-webpack-plugin根据模板html生成引入script的页面
　　　　使用clean-webpack-plugin清除dist文件夹
　　　　使用uglifyjs-webpack-plugin压缩打包的js文件

　　2、使用
　　　　npm install --save-dev html-webpack-plugin clean-webpack-plugin

　　3、webpack配置

const HtmlWebpackPlugin = require('html-webpack-plugin'); //自动生成html文件的插件
const {CleanWebpackPlugin} = require('clean-webpack-plugin'); //清除之前打包的文件 
plugins: [
　　new HtmlWebpackPlugin({template: './index.html'}),
　　new CleanWebpackPlugin(),
]

　　4、启动
　　创建模板页面，使用webpack命令启动生成资源