入门Web前端,这些干货不能少!

开课吧樵夫2021-12-29 16:41

  这是一篇精选的技术干货文章,凝聚了许多优秀的前端开发者的心血。希望你能学会并提高前端开发技术,如果你觉得这个系列有收获,欢迎大家留言。

入门Web前端,这些干货不能少!

  一、概述:

  webpack 是一个模块打包工具!

  官网地址:https://webpack.js.org/

入门Web前端,这些干货不能少!

  官方文档查阅技巧:

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

  以上就是小编为大家整理发布的“入门Web前端,这些干货不能少!”一文,更多相关内容尽在开课吧广场Web教程频道。

免责声明:本站所提供的内容均来源于网友提供或网络搜集,由本站编辑整理,仅供个人研究、交流学习使用。如涉及版权问题,请联系本站管理员予以更改或删除。
有用
分享