webpack 从零到一入门（一）

……写在前面的话，希望要入门Webpack的小伙伴第一个就能搜到这篇文章，目前下的最新的版本是5.11.1
我的配置是："webpack": "^4.41.6", "webpack-cli": "^3.3.11","webpack-dev-server": "^3.10.3"
后期学到webpack5，会不断的补充，一起学习吧

安装：

1.初始化项目
npm init
2.全局安装之后可以通过指令来调用
npm i webpack webpack-cli -g

webpack.config.js webpack 配置文件详解

作用：指示webpack 干哪些活 （运行webpack指令，会加载里面的配置）
所有的构建工具都是基于node.js平台运行的~模块化采用commonJs
loader: 1.下载 2.使用（配置loader）
plugins: 1.下载 2.引入 3.使用 npm i html-webpack-plugin -D

打包
  1. css 打包工具：style-loader、css-loader、less-loader、less
    安装方法：npm i '打包工具' -D
    注：less打包必须安装less-loader 和 less
  2. html 打包工具：html-webpack-plugin
    安装方法：npm i html-webpack-plugin -D
    使用：new htmlWebpackPlugin({ template: './src/index.html' })
  3. img图片打包：（待更新）
    处理样式中url图片（默认处理不了html中的img图片）下载 url-loader file-loader
    处理html文件的img图片：html-loader
  4. 打包其他资源(除了html/js/css以外的资源)
    使用：file-loader
优化（css提取，兼容性处理，压缩）

a.提取css成单独文件的插件: mini-css-extract-plugin
用法：const miniCssExtractPlugin = require('mini-css-extract-plugin')
b.压缩css插件: optimize-css-assets-webpack-plugin
用法：const optimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')
c.css兼容性：loader: 'postcss-loader'
注：可能存在兼容性问题
解决：项目根目录下新建一个postcss.config.js文件

postcss.config.js文件
module.exports = {
    plugins: [
        // postcss插件
        require('postcss-preset-env')()
    ]
}
本地环境配置：devServer

开发服务器 devServer： 自动化（自动编译，自动打开浏览器，自动刷新浏览器）
特点： 只会在内存中编译打包，不会有任何输出到本地代码
启动devServer指令：webpack-dev-server
安装：npm i webpack-dev-server -D
本地启动：npx webpack-dev-server

package.json 浏览器配置

package.json 浏览器配置

"browserslist": {
        "development": [
            "last 1 chrome version",
            "last 1 firefox version",
            "last 1 safari version"
        ],
        "production": [
            ">0.2%",
            "not dead",
            "not op_mini all"
        ]
    }
webpack.config.js 文件
/*
    webpack.config.js webpack 配置文件
        作用：指示webpack 干哪些活 （运行webpack指令，会加载里面的配置）
        所有的构建工具都是基于node.js平台运行的~模块化采用commonJs
        loader: 1.下载 2.使用（配置loader）
        plugins: 1.下载 2.引入 3.使用      npm i html-webpack-plugin -D
*/
// resolve 用来拼接绝对路径的方法
const { resolve } = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
// 提取css成单独文件的插件
// mini-css-extract-plugin
const miniCssExtractPlugin = require('mini-css-extract-plugin')
// 压缩css插件：optimize-css-assets-webpack-plugin
const optimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')

// 设置 nodeJs 环境变量，方便开发者调试
process.env_NODE_ENV = 'development'



module.exports = {
    // webpack配置
    // 入口起点
    entry: './src/js/index.js',
    // 输出
    output: {
        // 输出文件名
        filename: 'js/built.js',
        // 输出路径
        // __dirname noidejs变量，代表当前文件的目录的绝对路径
        path: resolve(__dirname, 'build')
    },
    // loader 的配置(翻译)
    module: {
        rules: [
            // 详细的loader配置
            // 不同文件必须配置不同的loader
            {
                // 匹配哪些文件
                test: /\.css$/,
                // 多个loader处理用use
                use: [
                    // use数组中的loader执行顺序： 从右到左，从下到上 依次执行
                    // 创建style标签，将js中的样式资源插入进去，添加到head中生效
                    // 'style-loader',
                    // 取代style-loader，提取js中的css成单独文件
                    miniCssExtractPlugin.loader,
                    // 将css文件变成commonJs模块加载js中，里面内容是样式字符串
                    'css-loader',
                     {
                        loader: 'postcss-loader',
                        // options: {
                        //     indent: 'postcss',
                        //     plugins: () => [
                        //         // postcss的插件
                        //         require('postcss-preset-env')()
                        //     ]
                        // }
                    }
                ]
            },
            {
                test: /\.less$/,
                use: [
                    'style-loader',
                    'css-loader',
                    // 需要下载 less-loader 和 less
                    'less-loader'
                ]
            },
            {
                // 处理图片,样式中url图片
                // 问题：默认处理不了html中的img图片
                test: /\.(jpg|png|gif)$/,
                // 使用一个loader
                // 下载 url-loader file-loader
                loader: 'url-loader',
                options: {
                    // 图片大小小于8kb，就会被base64处理
                    // 优势： 减少请求（减轻服务器压力）
                    // 缺点： 图片体积会增大（文件请求更慢）
                    limit: 5 * 1024,
                    // 问题：url-loader默认使用es6模块化解析，而html-loader引入图片是commonJs
                    // 解析出现: [object Module]
                    // 解决：关闭url-loader的es6模块化，使用commonJs解析
                    // esModule: false,
                    // 给图片重命名
                    // [hash:10] 取图片的hash的前十位
                    // [ext] 取文件原来的扩展名
                    name: '[hash:10].[ext]'
                }
            },
            {
                test: /\.html$/,
                // 处理html文件的img图片（负责引入img，从而被url-loader进行处理）
                loader: 'html-loader',
            },
            // 打包其他资源(除了html/js/css以外的资源)
            {
                exclude: /\.(css|less|js|html|jpg|png|gif)/,
                loader: 'file-loader',
                options: {
                    name: '[hash:10].[ext]'
                }
            }
        ]
    },
    // plugins 插件配置
    plugins: [
        // 详细的plugins配置
        // html-webpack-plugin
        // 功能：默认会创建一个 html 文件，引入打包输出的所有资源（js/css）
        // 需求： 需要有结构的html文件
        new htmlWebpackPlugin({
            // 复制一个 './src/index.html' 文件，并自动引入打包输出的所有资源（js/css）
            template: './src/index.html'
        }),
       new miniCssExtractPlugin({
            //对输出的css文件进行重命名
            filename: 'css/built.css'
        }),
        // 压缩css
        new optimizeCssAssetsWebpackPlugin()
    ],
    mode: 'development', // 开发模式
    // mode: "production"
    // 开发服务器 devServer： 自动化（自动编译，自动打开浏览器，自动刷新浏览器）
    // 特点： 只会在内存中编译打包，不会有任何输出到本地代码
    // 启动devServer指令：webpack-dev-server
    // 安装：npm i webpack-dev-server -D
    // 本地启动：npx webpack-dev-server
    devServer: {
        contentBase: resolve(__dirname, 'build'),
        // 启动gzip压缩
        compress: true,
        // 端口号
        port: 3000,
        // 默认打开浏览器
        open: true
    },
}
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • webpack打包工具（不含脚手架）
    什么是webpack，有什么作用 webpack是Vue的打包模块，适用于单页面应用程序（可显示页面数目小于500...
    五月唱诗班阅读 3,596评论 0赞 0
  • Webpack 打包工具
    webpack 现代化前端最流行的一款 构建打包工具 前端构建打包工具的发展历史 grunt gulp fis w...
    Poiey阅读 2,924评论 0赞 4
  • 工程化起步（二）：webpack
    一、webpack的基本概念 webpack 本质上是一个打包工具，它会根据代码的内容解析模块依赖，帮助我们把多个...
    cilla123阅读 5,496评论 0赞 8
  • 前端工程化&webpack
    1.模块化的相关规范 1.能够了解2.了解webpack3.了解使用Vue单文件组件4.能够搭建Vue脚手架5.掌...
    Scincyc阅读 3,848评论 0赞 0
  • webpack总结（更新中...）
    什么是Webpack-----模块打包工具 WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找...
    Susie_53b5阅读 2,532评论 0赞 0

友情链接更多精彩内容