resumen de productos secos webpack

I. Resumen:

¡webpack es una herramienta de empaquetado de módulos!

Dirección del sitio web oficial

Habilidades de revisión de documentos oficiales:

conceptos: conceptos

configuración: elemento de configuración

cargadores: cargadores oficiales relacionados

guías: guías

1. sobre el nivel del mar

Use npm (herramienta de administración de paquetes de nodos) para crear un proyecto que cumpla con las especificaciones de los nodos y genere el archivo de administración de paquetes package.json

npm init

Nota: Si desea empaquetar el proyecto con webpack, la estructura del proyecto debe cumplir con la especificación del nodo.

2. Instalar paquete web

Nota: webpack-cli proporciona funciones que pueden usar comandos de paquete web en la línea de comandos

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

3. Ver información de la versión relacionada con el paquete web

npm info webpack

4. comando webpack

Use el paquete web para modularizar index.js (npx puede ejecutar el paquete web instalado por el proyecto actual, al igual que el paquete web instalado globalmente)

npx webpack index.js

5. Importación y exportación de módulos

Especificación del módulo ES:

Exportación del módulo: exportar el encabezado predeterminado;

Importación del módulo: importar el encabezado de './ header.js';

Especificación CommonJS:

Exportación del módulo: module.export = Header;

Importación del módulo: var Header = require ('./ header.js')

6. archivo de configuración del paquete web

El archivo de configuración predeterminado webpack.config.js

Especifique el archivo de configuración cuando se empaqueta el paquete web: 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

Instalación: npm install eslint --save-dev

Generar archivo de configuración: npx eslint --init

.eslintrc.js

8. Ejemplos

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') 
    }
};