关于javascript:webpack4学习笔记

webpack4 学习笔记依据 Dell Lee 老师的课程整顿

webpack 的装置和入口配置

傻瓜式装置 node
查看 node - v 查看是否胜利
全局装置 webpack：npm install webpack webpack-cli -g

最好不要全局装置，否则多我的项目不能兼容。

我的项目内装置 :npm install webpack webpack-cli -D
查看我的项目内 webpack 版本代码
npx webpack -v
npx 会在以后我的项目目录下的 node_modules 找 webpack
npx 代替 npm 实现我的项目内装置应用

查看可装置的所有版本
npm info webpack

装置具体版本 webpack

npm install @xxxx

// 内置门路对象
const path = require('path')

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        //__dirname 为配置文件所在目录，和前面的参数组合形成输入文件的绝对路径
        path: path.resolve(__dirname.
            'bundle')
    }
}

### package 中 script 的配置

"script":{"bundle":"webpack"}
}
// 之后运行 npm run bundle 来进行打包

webpack-cli 的作用：使得 webpack 的命令能够在命令行中失效~

// 内置门路对象
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlungin = require('clean-webpack-plugin')
const webpack = require('webpack')
module.exports = {
    //development 为本地开发环境 production 为线上环境
    mode: 'development'
    /*sourcemap 是一个映射工具，把打包后的 js 和源文件对应，在本地开发的时候开启 dev 能够很好的定位问题
    sourcemap 有多个配置
    inline：map 文件内置到 js 中，不独自生成，只配置 sourcemap 就会独自生成一个 map 文件
    cheap：报错的信息只须要准确到行，进步打包速度，且不论 module 外面的谬误
    module：引入的第三方也退出映射关系
    eval：通过 eval 的模式引入映射关系，执行速度最快，性能最好。然而对于大文件定位不精确
    本地开发最佳配置：cheap-module-eval-source-map
    线上代码 bug 定位配置：cheap-module-source-map
    失常状况下线上不须要开启 source-map
    */
    devtool: 'source-map'
    devServer：{
        //dev 服务器应该部署的文件
        contentBase: './dist'
        // 跑起来之后是否主动关上
        open: true
        // 跨域代理，支流框架 React，Vue 都用了 webpack 启本地服务器，均反对 webpack 中的该配置
        proxy: {'/api': 'www.baidu.com'}
        // 开启热更新
        //React 和 Vue 都有本人的办法实现组件的热更新，一些偏远的数据热更新须要本人通过对 modeule.hot 的变量的配置本人写逻辑
        hot: true,
        hotOnly: true
    }
    entry: {main: './src/index.js',}
    output: {
        // 个别设置文件在服务器的绝对地位或者 cdn 域名
        // publicPath: 'http://cdn.com.cn'
        //name 占位符，使打包输入的文件依照名字命名
        filename: '[name].js',
        //__dirname 为配置文件所在目录，和前面的参数组合形成输入文件的绝对路径
        path: path.resolve(__dirname.
            'dist')
    }
    module: {
        rules: [{
                test: '/\.js$/',
                exclcude: /node_modules/,
                // 把 babel-loader 了解成链接 webpack 和 babel 的桥梁，真正起作用的是 @babel/preset-env 中的库
                // 这个库中只能本义一部分 ES6 语法，其余诸如 Promise，对象数组新增的办法等还须要借助 polyfill（垫片）来实现
                loader: "babel-loader",
                //options 外面的内容能够独自新建一个 .babelrc 的文件保留
                options: {
                    // 当须要些类库，给他人应用的组件时候，须要用 transform-runtime 来配置，因为 prest-env+ 垫片的配置会把所有办法裸露到全局
                    /*"plugins":[["@babel/plugin-transform-runtime",{
                        "corejs":2,
                        "helpers":true,
                        "regenerator":true,
                        "useESModules":false
                   }]]
                   */
                    presets: [
                        // 转化 es6 代码
                        "@babel/preset-env", {
                            // 让垫片按需加载
                            useBuiltIns: 'usage'
                            // 配置指标浏览器，能够按需打包
                            targets: {chrome: "67"}
                        },
                        // 转化 react 代码
                        "@babel/preset-react"
                    ]
                }
            },

            {test: /\.(jpg|png|gif)$/,
                use: {
                    /*url-loader 也能够打包动态文件
                url-loader 会把图片转成 base64 文件而不是独自生成文件
                长处：不必额定申请图片
                毛病：图片太大会导致 js 文件太大提早加载
                应用: 图片很小用 url-loader，大文件用 file-loader
                */
                    loader: 'file-loader',
                    options: {
                        //placeholder 占位符 => ext：文件后缀 hash：打包出文件的 hash 值
                        name: '[name].[ext]',
                        // 文件输入地位到 dist/images
                        outputPath: 'images/'
                        // 文件小于 20480（20k）则应用 url-loader，大于 20kb 就会独自生成图片
                        limit：204800
                    }


                }
            },
            /*
        style-loader: 把生成的文件引入到 html 的 head 中
        css-loader: 把 css 中的引入关系合并变成一一对应的 css 文件
        sass-loader: 将 sass 文件转译成 css，less-loader 同理，执行程序为从右到左
        postcss-loader：须要新建一个 postcss.config.js 文件，这是一个有很多 css 预处理的插件的合集
        postcss.config.js

        module.exports={
            plugins:[
            //autoprefixer: 主动减少厂商前缀
             require('autoprefixer')
        ]
        }
        */
            // use: ['style-loader', 'css-loader','sass-loader','postcss-loader']
            {
                test: /\.css$/,
                use: [
                    'style-loader', {
                        loader: 'css-loader',
                        options: {
                            // 保障所有的引入都会执行所有的 loader
                            importLoaders: 2，// 开启 css 模块化打包，在引入的时候由 import './styles.scss' 变成 import styels from './styles.scss'
                            modules：true
                        },
                        'sass-loader',
                        'postcss-loader'
                    }
                ]
            }, {
                // 对字体利用的打包，iconfont 等第三方字体
                test: /\.(eot|ttf|svg)$/,
                use: {loader: 'file-loader'}
            }

        ]
    },

    plugins: [
        new HtmlWebpackPlugin({
            // 打包完结后主动生成一个 html 文件并把打包完结的 js 引入到该 html 中
            // 以本人指定的 html 为模板
            template: './src/idnex.html'
        }),
        // 打包之前删除指定目录外面的所有文件
        new CleanWebpackPlungin(['dist']),
        new webpack.HotModuleReplacementPlugin()],
      /* 用于开发环境下的 tree-shaking 配置，如果存在不须要 shaking 的文件须要在 package.json 中的  
     sideEffects      字段中数组中增加
         eg：{“sideEffects”:["@babel/pollu-fill"]
          }
               */
optimization{usedEsxports:true}

}

整个配置文件，包含 tree-shaking 和 sourcemap 等在生产环境和开发环境须要不同配置的配置项
在理论开发中能够应用 webpack-merge 将所有的配置文件分成
webpack-common-config.js
webpack-dev-config.js
webpack-prod-config.js
而后通过 merge 进行文件合并，从而缩小反复代码

文章用于集体记录回溯，有谬误还望批评指正