webpack的一键打包攻略

webpack 使用

前言 : npm init 生成package.json 文件

一. 生产环境

1. 在package.json中引入相关依赖

{
  "name": "webpackdemo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^4.2.1",
    "file-loader": "^6.0.0",
    "html-loader": "^1.1.0",
    "html-webpack-plugin": "^4.3.0",
    "less-loader": "^6.2.0",
    "style-loader": "^1.2.1",
    "url-loader": "^4.1.0",
    "webpack": "^4.44.1",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.0"
  }
}

2. 在根目录创建 webpack.config.js 文件
   暴露五个基础对象

---

/// 在webpack 运行之前会读取此配置文件
//  webpack基于nodejs运行 使用commonjs

const { resolve } = require('path')
//引入html插件
const htmlWebpackPlugin = require('html-webpack-plugin')

///暴露5个核心配置 entry output plugins loader mode
module.exports = {
    //webpack 配置
    entry: './src/index.js',
    output: {
        filename: "built.js",
        ///这个路径使用绝对路径
        //__dirname 是nodejs变量 代表当前的目录路径
        path: resolve(__dirname,'dist')
    },
    module: {
        rules: [
            /// 详细loader配置
            ///css loader
            {
                //匹配文件 是一个正则
                test: /\.css$/,
                use: [
                    //将js的样式资源创建style标签加入到head中
                    'style-loader',
                    ///将css文件变成 commonjs加载到js中(字符串)
                    'css-loader'
                ]
            },
            ///less loader
            {
                test: /\.less$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'less-loader'
                ]
            },
            //处理图片资源
            {
                test : /\.(jpg|png|gif)$/,
                loader: 'url-loader',
                options: {
                    //图片小于8k就会转为base64 可以减少请求数量 但是体积会变大请求速度会变慢
                    //在html文件引入img时路径不会改变
                    limit : 8 * 1024,
                    //给图片重命名 取10位 hash.后缀名
                    name : '[hash:8].[ext]',
                    outputPath : 'images'
                }
            },
            //处理引入的img资源
            {
                test : /\.html$/,/// 解决上面img的问题可以使用htmlLoader来解决
                // 用来处理引入img图片的 ps html-webpack-plugin才是用来打包html文件的
                // 相同图片会复用
                loader: 'html-loader'
            },
            //打包其他资源
            {
                //exclude排除css js html less sass资源 坑 : 排除的话要排除js/json/img等 不然自带的编译会失效 或者使用test 匹配
                test: /\.(svg|ttf|woff|eot|woff2)$/,
                loader: 'file-loader',
                options : {
                	outputPath : 'font'
                }
            }
        ]
    },
    plugins: [
        //空惨构造方法会创建一个空的HTML默认引入打包好的资源
        // new htmlWebpackPlugin()
        new htmlWebpackPlugin({
            ///会自动引入资源所以不需要在手动引入了
            template: "./index.html"
        })
    ],
    mode: "development", //开发模式
    // mode: "production"
    // 自动化构建 在内存中打包,不会输出到本地代码
    devServer: {
        contentBase : resolve(__dirname,'dist'),
        //启动gzip压缩
        compress:true,
        port : 5200,
        open : true
    }
}

webpack 会以index.js作为入口文件
需要导入css / less 文件 需要在 index.js 中引入

function add(x, y) { //测试打包js
    return x + y
}

console.log(add(1, 2))

import data from './index.json' //测试打包json文件
///使用load解析css
import './index.css'
import './index.less'

/// 引入其他css资源文件 //以阿里图标和awesome图标为例
import './font/font_ln2sq8fdib9/iconfont.css'
import './font/font-awesome-4.7.0/css/font-awesome.min.css'

console.log(data)

let d = (a=10,b=20) => { //测试构建es6语法
    return a + b
}

console.log(d())

4. 最后 在指令框中 输入 webpack 指令即可一键打包
5. 输入npx webpack-dev-server 可以启动watch()功能 此功能不会输出到目标目录 会在内存中编译生成打开

二.运行环境 production

从js中抽取css 到独立文件并压缩

"devDependencies": {
    "css-loader": "^4.2.1",
    "file-loader": "^6.0.0",
    "html-loader": "^1.1.0",
    "html-webpack-plugin": "^4.3.0",
    "less-loader": "^6.2.0",
    "mini-css-extract-plugin": "^0.10.0",
    "optimize-css-assets-webpack-plugin": "^5.0.3",
    "postcss-loader": "^3.0.0",
    "postcss-preset-env": "^6.7.0",
    "style-loader": "^1.2.1",
    "url-loader": "^4.1.0",
    "webpack": "^4.44.1",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.0"
  },
  "browserslist": {
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ],
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ]
  }

加入相关依赖 并写入browserslist 给css做兼容
具体browserslist相关配置 可以在github中查找
webpack.config.js 文件

/// 在webpack 运行之前会读取此配置文件
//  webpack基于nodejs运行 使用commonjs

const { resolve } = require('path')
//引入html插件
const HtmlWebpackPlugin = require('html-webpack-plugin')
/// 使用 插件 提取js中的css文件
// npm i mini-css-extract-plugin -D
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const {loader} = require('mini-css-extract-plugin')

//使用 optimize-css-assets-webpack-plugin 压缩css
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')

//设置node环境变量
process.env.NODE_ENV = 'production'


///暴露5个核心配置 entry output plugins loader mode
module.exports = {
    //webpack 配置
    entry: './src/js/index.js',
    output: {
        filename: "js/built.js",
        ///这个路径使用绝对路径
        //__dirname 是nodejs变量 代表当前的目录路径
        path: resolve(__dirname,'dist')
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    // 'style-loader',
                    // 使用这个loader替换styleLoader 创建单独css文件
                    loader,
                    'css-loader',
                    /// 兼容性处理
                    {
                        loader: "postcss-loader",
                        options: {
                            ident : 'postcss',
                            plugins : ()=>{
                                require('postcss-preset-env')()
                            }
                        }
                    }
                ]
            },
            ///less loader
            {
                test: /\.less$/,
                use: [
                    // 'style-loader',
                    // 使用这个loader替换styleLoader 创建单独css文件
                    loader,
                    'css-loader',
                    'less-loader'
                ]
            },
            //处理图片资源
            {
                test : /\.(jpg|png|gif)$/,
                loader: 'url-loader',
                options: {
                    //图片小于8k就会转为base64 可以减少请求数量 但是体积会变大请求速度会变慢
                    //在html文件引入img时路径不会改变
                    limit : 8 * 1024,
                    //给图片重命名 取10位 hash.后缀名
                    name : '[hash:8].[ext]',
                    outputPath : 'images'
                }
            },
            //处理引入的img资源
            {
                test : /\.html$/,/// 解决上面img的问题可以使用htmlLoader来解决
                // 用来处理引入img图片的 ps html-webpack-plugin才是用来打包html文件的
                // 相同图片会复用
                loader: 'html-loader'
            },
            //打包其他资源
            {
                //排除css js html less sass资源 坑 : 排除的话要排除js/json/img等 不然自带的编译会失效
                test: /\.(svg|ttf|woff|eot|woff2)$/,
                loader: 'file-loader',
                options: {
                    outputPath : 'font'
                }
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            ///会自动引入资源所以不需要在手动引入了
            template: "./src/index.html"
        }),
        //提取css
        new MiniCssExtractPlugin({
            filename: 'css/built.css'
        }),
        //压缩css
        new OptimizeCssAssetsWebpackPlugin()
    ],
    // mode: "development", //开发模式
    // mode: "production"
}

运行 同上 命令行输入webpack即可