webpack 干货总结

一、概述：

webpack 是一个模块打包工具！

官网地址

官方文档查阅技巧：

concepts：概念

configuration：配置项

loaders：官方相关loader

guides：指南

 

1. npm

使用npm（node包管理工具）创建一个符合node规范的项目，生成包管理文件package.json

npm init

注：要想用webpack打包项目，项目结构要符合node规范

2. 安装webpack

注：webpack-cli提供可以在命令行使用webpack命令的功能

全局安装：npm install webpack webpack-cli -g（不推荐）
全局卸载：npm uninstall webpack webpack-cli -g
项目内安装：npm install webpack webpack-cli --save--dev（或者-D）（推荐）
安装指定版本：webpack：npm install webpack@4.16.5 webpack-cli --D
查看安装webpack版本： webpack -v

3. 查看webpack相关版本信息

npm info webpack

4. webpack命令

使用webpack对index.js进行模块化打包（npx可以执行当前项目安装的webpack，就跟全局安装的webpack那样）

npx webpack index.js

5. 模块导入导出

ES Module 规范：

• 模块导出：export default Header;
• 模块导入：import Header from './header.js';

CommonJS 规范：

• 模块导出：module.export = Header;
• 模块导入：var Header = require(‘./header.js')

6. webpack配置文件

默认配置文件webpack.config.js

webpack打包时指定配置文件：npx webpack --config webpack.config.js

//引入Node.js中path核心模块
const path = require('path');

module.export = {
    // mode:'development',//默认production
    // entry: './src/index.js'
    entry: {
        // 入口文件名默认main，可以不指定
        main:'./src/index.js'
    },
    output: {
        filename:'bundle.js',
        // __dirname表示其所属文件(webpack.config.js)的绝对路径
        path: path.resolve(__dirname, 'dist')
    }
}

7. eslint

安装：npm install eslint --save-dev

生成配置文件：npx eslint --init 

.eslintrc.js

8. 示例

const path = require('path'); //引入Node.js中path核心模块
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const webpack = require('webpack');

module.export = {
    mode:'development',//默认production(会压缩文件)

    // 推荐 development: 'cheap-module-eval-source-map'
    // 推荐 production: 'cheap-module-source-map'

    // source-map 用来维护打包前源js文件和打包后bundle.js文件的代码位置映射关系，这样当js文件 
    // 报错时可以直接索引到源js文件中的代码位置               
    // source-map 不加任何前缀，会生成一个map映射文件; 
    // inline：把映射关系嵌入到生成的bundle.js文件中
    // cheap：精确到行，效率较高
    // module：包含除了业务代码以外的js库文件；
    // eval：适合小型项目，速度最快，生产中不用
    devtool: 'cheap-module-eval-source-map',

    // entry: './src/index.js'
    entry: {
        main: './src/index.js', // 入口文件名默认main，可以不指定
        // sub: './src/index.js'// 可以指定多个入口文件, 即可以根据多个文件去打包
    },

    // 更多内容参考：https://webpack.js.org/configuration/dev-server
    // devServer会把打包后生成的文件放到内存中，提高打包效率！
    // 后端服务URL：http://www.dell-lee.com/react/api/header.json; 
    // http://www.dell-lee.com/react/api/demo.json
    devServer: {
        overlay: true,// 当不符合eslint规范时，浏览器弹出悬浮层显示
        host: '127.0.0.1',
        port: 8080,
        contentPath: './dist',// 发布内容到devServer的目录，类似于tomcat的webapp目录
        open: true,// 服务器启动后是否自动打开浏览器

        // 更多内容参考：https://webpack.js.org/configuration/dev-server#devserverproxy
        proxy: {
            '/react/api/': {
                // 当请求/react/api/*时，把请求代理到http://www.dell-lee.com上,
                // 即访问http://www.dell-lee.com/react/api/*
                target: 'http://www.dell-lee.com/',
                secure: false,// 绕过https的认证限制
                pathRewrite: {
                    'header.json': 'demo.json'// 实现路径重写(重定向)
                },
                // 可以突破一些网站对于爬虫等操作的限制，通常把该选项一直加上
                changeOrgin: true,
                // 指定http请求头
                headers: {
                    host: 'www.dell-lee.com'
                }
            }
        },
        // https://webpack.js.org/concepts/hot-module-replacement/
        // 开启 Hot Module Replacement功能，HMR会保持应用的状态，并且保证只加载修改的地方,
        // 不会全局加载js文件，提高开发效率!
        hot: true,
        hotOnly: true// 保证即使HMR不生效也不刷新浏览器
    },

    // loader用来扩展webpack的功能，类似于maven的dependency
    module: {
        // babel用来解析ES6语法
        rules: [
            {
                test: /.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                options: {
                    presets: [['@babel/preset-env',{

                        // 参考：https://babeljs.io/docs/en/babel-polyfill
                        // npm install --save @babel/polyfill; 
                        // 为了使用ES6中的一些内建库（like Promise or WeakMap, 
                        // staticmethods like Array.from or Object.assign）
                        // @babel/polyfill可以把这些内建库函数转换成低版本浏览器识别的js语法，
                        // useBuiltIns: 'usage' 实现按需引入。
                        userBuiltIns: 'usage'
                    }]]
                }
            },
            {
                test: /.(jpg|png|gif)$/,
                use: {
                    // loader: 'file-loader',
                    // 和file-loader 唯一的区别就是包含limit选项，通过设置limit值限定当大小
                    // 不超过limit时，把资源转换成base64直接嵌入到js文件中。
                    loader: 'url-loader',
                    options: {
                        name: '[name]_[hash].[ext]',// 指定打包后的文件名格式
                        outputPath: 'images/',// 指定打包后文件目录
                        limit: 10240
                    }
                }
            },
            {
                test: /.scss$/,
                use: {
                    loader: [
                        'style-loader', // 在index.html中head区域嵌入style样式
                        // 'css-loader', // 解决css文件之间的依赖关系
                        {
                            loader: 'css-loader',
                            options: {
                                // 在sass文件中也可以引入sass文件，这样顺序执行到sass文件中
                                // 引入另一个sass文件的代码行时，        
                                // 也可以重新执行之前已经加载过的loader
                                importLoaders: 2,
                                // 可以使用import style from './index.sass' 使样式在局部文件中有效
                                module: true
                            }
                        },
                        'sass-loader', // 解析sass预处理语法
                        'postcss-loader' // 会处理transform等css3标签的浏览器兼容问题，比如样式属性加上-webkit
                    ]
                }
            },
            {
                test: /.css$/,
                use: {
                    loader: [
                        'style-loader',
                        'css-loader',
                        'postcss-loader'
                    ]
                }
            }
        ]
    },

    // plugin用来影响webpack打包生命周期的功能，类似于maven的plugin
    plugins: [
        // 可以自动生成index.html文件，并把打包生成的js文件引入到index.html文件中
        new HtmlWebpackPlugin({
            template: 'src/index.html'// 指定生成的index.html文件使用的html模板
        }),
        // 打包之前会先清除指定的目录
        new CleanWebpackPlugin(['dist']),
        // HMR
        new webpack.HotModuleReplacementPlugin()
    ],
    output: {
        filename: 'bundle.js',
        // filename: '[name].js'// name为入口文件的key值,即main以及sub
        // publicPath: 'http://csn.com.cn',// 指定index.html中引入main.js以及sub.js时加上的url前缀
        // _dirname表示其所在文件(这里为webpack.config.js)的绝对路径
        path: path.resolve(_dirname, 'dist') 
    }
};