精华内容
参与话题
问答
  • webpack4.x 入门一篇足矣

    万次阅读 2018-06-26 15:49:22
    前言:webpack4出了以后,一些插件变化很大,和之前的版本使用方式不一样,新手入坑,本篇将介绍如何从一开始配置webpack4的开发版本,对css,js进行编译打包合并生成md5,CSS中的图片处理,js自动注入html页,删除...

    前言:

    webpack4出了以后,一些插件变化很大,和之前的版本使用方式不一样,新手入坑,本篇将介绍如何从一开始配置webpack4的开发版本,对css,js进行编译打包合并生成md5,CSS中的图片处理,js自动注入html页,删除指定文件,提取公共文件热更新等等。

    安装

    //全局安装 
    npm install -g webpack webpack-cli
    

    创建文件夹初始化

    //创建文件夹
    mkdir webpack4demo
    //进入
    cd webpack4demo
    //初始化
    npm init -y

    创建文件夹scripts 里面创建index.js文件

    index.js

    const s=()=>{ 
    console.log('s init')
    }
    s()

    创建webpack.config.js文件

    webpack.config.js

    const path = require("path");
    module.exports = {
        entry: {
            index: "./scripts/index.js" //入口文件,若不配置webpack4将自动查找src目录下的index.js文件
        },
        output: {
            filename: "[name].bundle.js",//输出文件名,[name]表示入口文件js名
            path: path.join(__dirname, "dist")//输出文件路径
        }
    }
    

    执行webpack --mode development将会生成dist/index.bundle.js


    创建index.html,并引入js

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>$Title$</title>
    </head>
    <body>
    $END$
    </body>
    <script src="./dist/index.bundle.js"></script>
    </html>

    打开浏览器将会看到之前设置的js文件生效

    对css,js进行编译打包合并生成md5

    创建a.js,c.js,a.css,更改index.js

    a.js

    import acss from './a.css'
    import c from './c.js'
    const a={
        init(){
            console.log("a init bbbaaa")
        },
        cinit(){
           c.init()
        }
    }
    export default a;

    c.js

    const c={
        init(){
            console.log("ccccc")
        }
    }
    export default c;

    a.css

    body{ 
        background-color: #6b0392;
    }

    index.js

    import a from './a.js'
    import c from './c.js'
    const s=()=>{
        a.init()
        a.cinit()
        c.init()
        console.log('s init')
    }
    s()

    配置webpack.config.js文件

    const path = require("path");
    module.exports = {
        entry: {
            index: "./scripts/index.js"
        },
        output: {
            filename: "[name].bundle.[hash].js",//[hash]会在后面生成随机hash值
            path: path.join(__dirname, "dist")
        },
        module: { // 处理对应模块
            rules: [
                {
                    test: /\.css$/,
                    use: [ 'style-loader', 'css-loader' ]//处理css
                }
            ]
        },
    }

    安装style-loader, css-loader

    npm install style-loader css-loader --save-dev
    

    执行webpack --mode development将会看到一个带md5值得js文件,将他引入html中

    CSS中的图片处理

    安装url-loader, file-loader

    npm install url-loader file-loader --save-dev
    

    修改a.css 将一张图片放到scripts目录

    body{
        background-image: url("./timg.jpg");
        background-color: #a748ca;
    }

    配置webpack.config.js文件

    module: {
        rules: [
            {
                test: /\.css$/,
                use: [ 'style-loader', 'css-loader' ]
            },
            {
                test:/\.(png|jpg|gif)$/,
                use:[{
                    loader:'url-loader',
                    options:{
                        outputPath:'images/',//输出到images文件夹
                        limit:500  //是把小于500B的文件打成Base64的格式,写入JS
                    }
                }]
            }
        ]
    },

    执行webpack --mode development将会看到dist中有一个images文件夹中有一张图片,打开index.html


    js自动注入html文件

    使用插件html-webpack-plugin,可以将生成的js自动引入html页面,不用手动添加

    //安装html-webpack-plugin
    npm install html-webpack-plugin --save-dev
    //安装webpack webpack-cli
    npm install webpack webpack-cli --save-dev
    

    配置webpack.config.js文件

    const path = require("path");
    const HtmlWebpackPlugin = require('html-webpack-plugin');//引入html-webpack-plugin
    module.exports = {
        entry: {
            index: "./scripts/index.js"
        },
        output: {
            filename: "[name].bundle.[hash].js",
            path: path.join(__dirname, "dist")
        },
        module: {
            rules: [
                {
                    test: /\.css$/,
                    use: [ 'style-loader', 'css-loader' ]
                }
            ]
        },
        plugins: [// 对应的插件
            new HtmlWebpackPlugin({ //配置
                filename: 'index.html',//输出文件名
                template: './index.html',//以当前目录下的index.html文件为模板生成dist/index.html文件
            }),
        ]
    }

    执行webpack --mode development 记得要讲之前手动引入的script删除,便可以看到dist那里自动生成一个index.html,打开便可以看到。

    删除指定文件

    使用插件clean-webpack-plugin,删除指定文件,更多配置,查看clean-webpack-plugin

    npm install clean-webpack-plugin --save-dev

    配置webpack.config.js文件

    const CleanWebpackPlugin = require('clean-webpack-plugin');//引入    
    plugins: [// 对应的插件
            new HtmlWebpackPlugin({ //配置
                filename: 'index.html',//输出文件名
                template: './index.html',//以当前目录下的index.html文件为模板生成dist/index.html文件
            }),
            new CleanWebpackPlugin(['dist']), //传入数组,指定要删除的目录
        ]

    执行webpack --mode development,可以看到dist目录被删除,又生成一个新的dist,之前的js文件已经被删除。

    提取公共文件

    我们可看到a.js和index.js都引入了c.js文件,为什么要提取公共代码,简单来说,就是减少代码冗余,提高加载速度。和之前的webpack配置不一样:

    //之前配置
    // new webpack.optimize.SplitChunksPlugin({
    //     name: 'common', // 如果还要提取公共代码,在新建一个实例
    //     minChunks: 2, //重复两次之后就提取出来
    //     chunks: ['index', 'a'] // 指定提取范围
    // }),
    //现在配置
    optimization: {
        splitChunks: {
            cacheGroups: {
                commons: {  // 抽离自己写的公共代码
                    chunks: "initial",
                    name: "common", // 打包后的文件名,任意命名
                    minChunks: 2,//最小引用2次
                    minSize: 0 // 只要超出0字节就生成一个新包
                },
                vendor: {   // 抽离第三方插件
                    test: /node_modules/,   // 指定是node_modules下的第三方包
                    chunks: 'initial',
                    name: 'vendor',  // 打包后的文件名,任意命名
                    // 设置优先级,防止和自定义的公共代码提取时被覆盖,不进行打包
                    priority: 10
                },
            }
        }
    },
    

    下载jq npm install jquery --save 在a.js,index.js引用 import $ from 'jquery' 输出$

    生成3个js文件,执行webpack --mode development


    热更新,自动刷新

    我们将用到webpack-dev-servewebpack-dev-server就是一个基于Node.jswebpack的一个小型服务器,它有强大的自动刷新热替换功能。

    安装webpack-dev-serve

    npm install webpack-dev-serve --save-dev

    配置webpack.config.js文件

    const webpack = require("webpack");
    plugins: [
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: './index.html',
        }),
        new CleanWebpackPlugin(['dist']), //传入数组,指定要删除的目录
        // 热更新,热更新不是刷新
        new webpack.HotModuleReplacementPlugin()
    ],
    devServer: {//配置此静态文件服务器,可以用来预览打包后项目
        inline:true,//打包后加入一个websocket客户端
        hot:true,//热加载
        contentBase: path.resolve(__dirname, 'dist'),//开发服务运行时的文件根目录
        host: 'localhost',//主机地址
        port: 9090,//端口号
        compress: true//开发服务器是否启动gzip等压缩
    },

    配置package.json

    "scripts": {
      "dev": "webpack-dev-server --mode development"
    },

    执行npm run dev 访问 http://localhost:9090/

    随便修改任一文件便会自动刷新网站显示修改相应内容。

    总结:

    webpack4还有很多很多配置,例如css的拆分呀,less sass配置呀,js编译es6呀,多入口配置呀,生产环境配置,js没有使用的模块自动检测剥离等等,只能等下次有空在总结,感谢大家的观看,新手入坑,欢迎指出错误的地方。


    作者:eternalless
    链接:https://juejin.im/post/5b2b9a00e51d45587b48075e
    来源:掘金
    著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
    展开全文
  • webpack4 从零开始

    千次阅读 2018-08-04 18:34:10
     新建文件夹webpack4Demo    2、初始化package.json  进入文件夹 执行 npm init 初始化一个工程,里面会有一个初始化的package.json    3、安装webpack 和webpack-cli  cnpm instal...

    本文借鉴与https://www.jianshu.com/p/6712e4e4b8fe,感谢分享

    1、项目搭建

       新建文件夹webpack4Demo

     

     2、初始化package.json

      进入文件夹 执行 npm init 初始化一个工程,里面会有一个初始化的package.json

     

     3、安装webpack 和webpack-cli

      cnpm install webpack webpack-cli  -g

     

    4、此时可以直接使用webpack指令打包了,webpack4.x 默认打包输入路径是'./src/index.js'  输出为'./dist/mian.js'.但是你会发现出现黄色的警告信息

     

    5、mode是4.x版本独有的特性,有生产模式和开发模式俩种,production和devlopment

    webpack --mode=development  或者 webpack --mode=production

    生产模式下打得包体积更小,并且会生成一个node_modules的文件夹

     

    6、自己动手webpack的配置

    修改package.json中的内容

    执行 npm run build

    7、多入口的配置

    8、devServer配置

    浏览器可以正常运行 

    9、CSS文件打包配置

    在src中新建一个index.css文件,在main.js中导入

    执行 npm run server

    发现 这个时候不能解析,我们需要下载css-loader和style-loader

    npm install style-loader css-loader --save-dev  这个时候一定要安装到项目中来,不能再安装全局的否则无用

    webpack配置css打包项 【写到会为止】

    我的浏览器也生效了!

    10、JS压缩,上线需要对js文件进行压缩减少带宽

    这里使用uglifyjs-webpack-plugin(JS压缩插件,简称uglify)

    webpack中已经集成了这个插件,所以不用下载了,这里注意前面下在那个 webpack和webpack-cli的时候一定要下到本项目中,否则会报错

    这个是main.js未压缩时

    对他进行压缩

    main.js已经变成这个样子了

     在生产模式下默认就是压缩的

    11、打包HTML文件

    需要先安装 npm install html-webpack-plugin --save-dev

    然后配置打包插件

    最后生成的模板HTML为

    12、处理CSS中的图片信息

    我们在css中给bady加上背景图片,然后编译的时候报错

    我们需要俩个解析照片和url的loader

    npm install file-loader url-loader --save-dev

    file-loader:解决引用路径的问题,拿background样式用url引入背景图来说,我们都知道,webpack最终会将各个模块打包成一个文件,因此我们样式中的url路径是相对入口html页面的,而不是相对于原始css文件所在的路径的。这就会导致图片引入失败。这个问题是用file-loader解决的,file-loader可以解析项目中的url引入(不仅限于css),根据我们的配置,将图片拷贝到相应的路径,再根据我们的配置,修改打包后文件引用路径,使之指向正确的文件。

    url-loader:如果图片较多,会发很多http请求,会降低页面性能。这个问题可以通过url-loader解决。url-loader会将引入的图片编码,生成dataURl。相当于把图片数据翻译成一串字符。再把这串字符打包到文件中,最终只需要引入这个文件就能访问图片了。当然,如果图片较大,编码会消耗性能。因此url-loader提供了一个limit参数,小于limit字节的文件会被转为DataURl,大于limit的还会使用file-loader进行copy。

    构建成功!

    13、将CSS在JS中分离出来

    这里需要安装插件

    npm install extract-text-webpack-plugin  webpack3.0用这个插件去实现CSS分离,

    webpack4.0使用  mini-css-extract-plugin 实现CSS分离

    npm install mini-css-extract-plugin --save-dev

    改完css分离,记住还要将图片输出路径修改下,否则出现出现路径加载错误

    14、如何加载HTML中写的img标签呢?

    html中直接定义img标签,npm run build 之后,打开浏览器

    发现图片路径错误

    解决错误:

    npm install html-withimg-loader --save-dev

    这样就可以成功了,还要注意一点就是JS中引用照片和react当中引用照片,打包若是丢失照片,需要使用模块化的去写

    15、.babelrc配置

    因为现在很多浏览器还不支持es6的语法所以很多代码中es6语法需要转义为es5的写法,这里就需要babelrc了

    npm install babel-loader --save-dev  但是babel-loader需要babel-core,所以还要下载

    npm install babel-core --save-dev

    虽然Babel可以直接在webpack.config.js中进行配置,但是考虑到babel具有非常多的配置选项,如果写在webapck.config.js中会非常的雍长不可阅读,所以我们经常把配置写在.babelrc文件里。

    官方推荐使用的是babel-preset-env  所以去下载 npm install babel-preset-env  --save-dev

     

    还有 sass和less的配置后面项目中用到在具体的配置

     

    最后附上我的package.json

    展开全文
  • webpack4优化学习

    千次阅读 2018-12-14 10:39:49
    当用 Webpack 去构建一个可以被其他模块导入使用的库时需要用到它们 output.libraryTarget 配置以何种方式导出库 output.library 配置导出库的名称 output.libraryTarget 是字符串的枚举类型,支持以下配置 var ...

    libraryTarget 和 library

    当用 Webpack 去构建一个可以被其他模块导入使用的库时需要用到它们

    • output.libraryTarget 配置以何种方式导出库
    • output.library 配置导出库的名称 output.libraryTarget 是字符串的枚举类型,支持以下配置

    var (默认)

    编写的库将通过var被赋值给通过library指定名称的变量。

    index.js

    module.exports =  {
        add(a,b) {
            return a+b;
        }
    }
    

    bundle.js

    var calculator=(function (modules) {}({})
    

    index.html

        <script src="bundle.js"></script>
        <script>
            let ret = calculator.add(1,2);
            console.log(ret);
        </script>
    

    commonjs

    编写的库将通过 CommonJS 规范导出。

    导出方式

    exports["calculator"] = (function (modules) {}({})
    

    使用方式

    require('npm-name')['calculator'].add(1,2);
    

    npm-name是指模块发布到 Npm 代码仓库时的名称

    commonjs2

    编写的库将通过 CommonJS 规范导出。

    导出方式

    module.exports = (function (modules) {}({})
    

    使用方式

    require('npm-name').add();
    

    在 output.libraryTarget 为 commonjs2 时,配置 output.library 将没有意义。

    this

    编写的库将通过 this 被赋值给通过 library 指定的名称,输出和使用的代码如下:

    导出方式

    this["calculator"]= (function (modules) {}({})
    

    使用方式

    this.calculator.add();
    

    window

    编写的库将通过 window 被赋值给通过 library 指定的名称,即把库挂载到 window 上,输出和使用的代码如下:

    导出方式

    window["calculator"]= (function (modules) {}({})
    

    使用方式

    window.calculator.add();
    

    global

    编写的库将通过 global 被赋值给通过 library 指定的名称,即把库挂载到 global 上,输出和使用的代码如下:

    导出方式

    global["calculator"]= (function (modules) {}({})
    

    使用方式

    global.calculator.add();
    

    DLL

    .dll为后缀的文件称为动态链接库,在一个动态链接库中可以包含给其他模块调用的函数和数据

    • 把基础模块独立出来打包到单独的动态连接库里
    • 当需要导入的模块在动态连接库里的时候,模块不能再次被打包,而是去动态连接库里获取
    • dll-plugin

    定义Dll

    • DllPlugin插件: 用于打包出一个个动态连接库
    • DllReferencePlugin: 在配置文件中引入DllPlugin插件打包好的动态连接库
    const path=require('path');
    const DllPlugin=require('webpack/lib/DllPlugin');
    module.exports={
        entry: {
            react:['react','react-dom']
        },// 把 React 相关模块的放到一个单独的动态链接库
        output: {
            path: path.resolve(__dirname,'dist'),// 输出的文件都放到 dist 目录下
            filename: '[name].dll.js',//输出的动态链接库的文件名称,[name] 代表当前动态链接库的名称
            library: '_dll_[name]',//存放动态链接库的全局变量名称,例如对应 react 来说就是 _dll_react
        },
        plugins: [
            new DllPlugin({
                // 动态链接库的全局变量名称,需要和 output.library 中保持一致
                // 该字段的值也就是输出的 manifest.json 文件 中 name 字段的值
                // 例如 react.manifest.json 中就有 "name": "_dll_react"
                name: '_dll_[name]',
                // 描述动态链接库的 manifest.json 文件输出时的文件名称
                path: path.join(__dirname, 'dist', '[name].manifest.json')
            })
        ]
    }
    webpack --config webpack.dll.config.js --mode development
    

    使用动态链接库文件

    const DllReferencePlugin = require('webpack/lib/DllReferencePlugin')
    plugins: [
      new DllReferencePlugin({
        manifest:require('./dist/react.manifest.json')
      })
    ]
    webpack --config webpack.config.js --mode development
    

    html中使用

    <script src="react.dll.js"></script>
    <script src="bundle.js"></script>
    

    HappyPack

    • 构建需要解析和处理文件,文件读写和计算密集型的操作太多后速度会很慢
    • Node.js 之上的 Webpack 是单线程模型
    • happypack 就能让Webpack把任务分解给多个子进程去并发的执行,子进程处理完后再把结果发送给主进程。
    npm i happypack@next -D
    const HappyPack = require('happypack');
        rules: [
        {
            test: /\.js$/,
            // 把对 .js 文件的处理转交给 id 为 babel 的 HappyPack 实例
            use: ['happypack/loader?id=babel'],
            exclude: path.resolve(__dirname, 'node_modules'),
        },
        {
            test: /\.css$/,
            // 把对 .css 文件的处理转交给 id 为 css 的 HappyPack 实例
            use: ['happypack/loader?id=css']
        }
    ],
    plugins: [
        new Happypack({
            //ID是标识符的意思,ID用来代理当前的happypack是用来处理一类特定的文件的
            id: 'js',
            use: [{
                loader: 'babel-loader',
                //options=query都是向插件传递参数的
                options: {
                    presets: [["@babel/preset-env", { modules: false }], "@babel/preset-react"],
                    plugins: [
                        ["@babel/plugin-proposal-decorators", { "legacy": true }],
                        ["@babel/plugin-proposal-class-properties", { "loose": true }],
                    ]
                }
            }]
        }),
        new Happypack({
            //ID是标识符的意思,ID用来代理当前的happypack是用来处理一类特定的文件的
            id: 'css',
            use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader'],
            threads: 4,//你要开启多少个子进程去处理这一类型的文件
            verbose: true//是否要输出详细的日志 verbose
        })
    ]
    

    CDN

    CDN 又叫内容分发网络,通过把资源部署到世界各地,用户在访问时按照就近原则从离用户最近的服务器获取资源,从而加速资源的获取速度。

    cnd

    • HTML文件不缓存,放在自己的服务器上,关闭自己服务器的缓存,静态资源的URL变成指向CDN服务器的地址
    • 静态的JavaScript、CSS、图片等文件开启CDN和缓存,并且文件名带上HASH值
    • 为了并行加载不阻塞,把不同的静态资源分配到不同的CDN服务器上

    使用缓存

    • 由于 CDN 服务一般都会给资源开启很长时间的缓存,例如用户从 CDN 上获取到了 index.html 这个文件后, 即使之后的发布操作把 index.html 文件给重新覆盖了,但是用户在很长一段时间内还是运行的之前的版本,这会新的导致发布不能立即生效 解决办法
    • 针对 HTML 文件:不开启缓存,把 HTML 放到自己的服务器上,而不是 CDN 服务上,同时关闭自己服务器上的缓存。自己的服务器只提供 HTML 文件和数据接口。
    • 针对静态的 JavaScript、CSS、图片等文件:开启 CDN 和缓存,上传到 CDN 服务上去,同时给每个文件名带上由文件内容算出的 Hash 值
    • 带上 Hash 值的原因是文件名会随着文件内容而变化,只要文件发生变化其对应的 URL 就会变化,它就会被重新下载,无论缓存时间有多长。
    • 启用CDN之后 相对路径,都变成了绝对的指向 CDN 服务的 URL 地址

    域名限制

    • 同一时刻针对同一个域名的资源并行请求是有限制
    • 可以把这些静态资源分散到不同的 CDN 服务上去
    • 多个域名后会增加域名解析时间
    • 可以通过在 HTML HEAD 标签中 加入<link rel="dns-prefetch" href="">去预解析域名,以降低域名解析带来的延迟

    接入CDN

    要给网站接入 CDN,需要把网页的静态资源上传到 CDN 服务上去,在服务这些静态资源的时候需要通过 CDN 服务提供的 URL 地址去访问

        output: {
            path: path.resolve(__dirname, 'dist'),
    +        filename: '[name]_[hash:8].js',
    +        publicPath: 'http://img.qiniu.cn'
        },
    

    Tree Shaking

    Tree Shaking 可以用来剔除JavaScript中用不上的死代码。它依赖静态的ES6模块化语法,例如通过importexport导入导出。

    普通情况

    calc.js

    export function add(a,b){
       return a + b;
    }
    export function minus(a,b){
       return a - b;
    }
    

    index.js

    import {add} from './calc';
    add(1,2)
    

    calc.js

    export function add(a,b){
       return a + b;
    }
    

    由于只用到了 calc.js 中的 add,所以剩下的都被 Tree Shaking 当作死代码给剔除了

    不要编译ES6模块

    • 要让 Tree Shaking 正常工作的前提是交给 Webpack 的 JavaScript 代码必须是采用 ES6 模块化语法的
    • 对于 module.export Webpack 无法分析出哪些代码可以剔除
    • "modules": false 的含义是关闭 Babel 的模块转换功能,保留原本的 ES6 模块化语法。
        use:[{
            loader: 'babel-loader',
                options: {
    +                presets:[['@babel/preset-env',{modules: false }],'@babel/preset-react']
            }
        }]
    

    显示未使用的导出实例

    npx webpack --display-used-exports
    

    剔除用不上的代码

    • Webpack只是分析出了哪些函数用上了哪些没用上,要剔除用不上的代码还得经过UglifyJS去处理
    webpack --display-used-exports --optimize-minimize
    

    启用压缩

    optimization: {
          minimizer: [
                 new UglifyJsPlugin({
                     cache: true,//启动缓存
                     parallel: true,//启动并行压缩
                     //如果为true的话,可以获得sourcemap
                     sourceMap: true // set to true if you want JS source maps
                 }),
                 //压缩css资源的
                 new OptimizeCSSAssetsPlugin({})
             ]
    }
    

    深度分析

    webpack-deep-scope-analysis-plugin

    import _ from 'lodash-es';
    //加法
    function isArray(value) {
        return _.isArray(value);
    }
    //减法
    function add(a, b) {
        return a + b + _.isArray([]);
    }
    export {
        isArray,
        add
    }
    const WebpackDeepScopeAnalysisPlugin = require('webpack-deep-scope-plugin').default;
    
    module.export = {
      plugins: [
        ...,
        new WebpackDeepScopeAnalysisPlugin(),
      ],
    }
    

    提取公共代码

    为什么需要提取公共代码

    大网站有多个页面,每个页面由于采用相同技术栈和样式代码,会包含很多公共代码,如果都包含进来会有问题

    • 相同的资源被重复的加载,浪费用户的流量和服务器的成本;
    • 每个页面需要加载的资源太大,导致网页首屏加载缓慢,影响用户体验。 如果能把公共代码抽离成单独文件进行加载能进行优化,可以减少网络传输流量,降低服务器成本

    如何提取

    提取公共代码

    pageA.js

    import utility1 from './utility1';
    import utility2 from './utility2';
    import $ from 'jquery';
    

    pageB.js

    import utility2 from './utility1';
    import utility3 from './utility2';
    import $ from 'jquery';
    

    pageC.js

    import utility2 from './utility3';
    import utility3 from './utility1';
    import $ from 'jquery';
        entry: {
            pageA: './src/pageA',
            pageB: './src/pageB',
            pageC: './src/pageC'
        },
        output: {
            path: path.resolve(__dirname,'dist'),
            filename: '[name].js'
        },
        optimization: {
            splitChunks: {
                cacheGroups: {
                    // 不同页面之间的公用模块
                    commons: {
                        chunks: "initial",
                        minChunks: 2,//最小重复使用的次数
                        minSize: 0 //最小提取字节数
                    },
                    // 第三方模块
                    vendor: {
                        test: /node_modules/,
                        chunks: "initial",
                        name: "vendor",
                    }
                }
            }
        }
    
        plugins:[
           new HtmlWebpackPlugin({
                template: './src/index.html',
                filename: 'pageA.html',
                chunks: ['pageA'],
                minify: {
                    removeAttributeQuotes: true
                }
            }),
            new HtmlWebpackPlugin({
                template: './src/index.html',
                filename: 'pageB.html',
                chunks: ['pageB'],
                minify: {
                    removeAttributeQuotes: true
                }
            }),
            new HtmlWebpackPlugin({
                template: './src/index.html',
                filename: 'pageC.html',
                chunks: ['pageC'],
                minify: {
                    removeAttributeQuotes: true
                }
            })
        ]
    

    开启 Scope Hoisting

    Scope Hoisting 可以让 Webpack 打包出来的代码文件更小、运行的更快, 它又译作 “作用域提升”,是在 Webpack3 中新推出的功能。

    • 代码体积更小,因为函数申明语句会产生大量代码
    • 代码在运行时因为创建的函数作用域更少了,内存开销也随之变小

    插件配置

    const ModuleConcatenationPlugin = require('webpack/lib/optimize/ModuleConcatenationPlugin');
    module.exports = {
      resolve: {
        // 针对 Npm 中的第三方模块优先采用 jsnext:main 中指向的 ES6 模块化语法的文件
        mainFields: ['jsnext:main', 'browser', 'main']
      },
      plugins: [
        // 开启 Scope Hoisting
        new ModuleConcatenationPlugin(),
      ],
    };
    

    代码

    hello.js

    export default 'Hello';
    

    index.js

    import str from './hello.js';
    console.log(str);
    

    输出的结果main.js

    var n = name = "zfpx";
      console.log(n)
    

    函数由两个变成了一个,hello.js 中定义的内容被直接注入到了 main.js 中

    动态导入和懒加载

    用户当前需要用什么功能就只加载这个功能对应的代码,也就是所谓的按需加载 在给单页应用做按需加载优化时,一般采用以下原则:

    • 对网站功能进行划分,每一类一个chunk
    • 对于首次打开页面需要的功能直接加载,尽快展示给用户
    • 某些依赖大量代码的功能点可以按需加载
    • 被分割出去的代码需要一个按需加载的时机

    动态导入和懒加载

    handler.js

    module.exports=function () {
        alert('你点我啦!');
    }
    

    index.js

    document.querySelector('#clickBtn').addEventListener('mouseover',() => {
        import('./handler').then(clickMe => {
            window.clickMe=clickMe.default;
        });
    });
    

    html

    <div id="clickBtn" onclick="clickMe()">弹框</div>
    

    react-router4 路由懒加载

    index.js

    import React from 'react';
    import ReactDOM from 'react-dom';
    import {HashRouter as Router,Route} from 'react-router-dom';
    import Bundle from './Bundle';
    let LazyAbout=(props) => (<Bundle {...props} load={()=>import('./About')}/>)
    let Home=() => <div>Home</div>
    ReactDOM.render(
    <Router>
        <div>
          <Route path="/" component={Home} />
          <Route path="/about" component={LazyAbout}/>
        </div>
    </Router>,document.getElementById('root'));
    

    Bundle

    import React from 'react';
    export default class Bundle extends React.Component{
        state={Mod: null}
        componentWillMount() {
            this.props.load().then(mod=>this.setState({Mod: mod.default? mod.default:mod}));
        }
        render() {
            let Mod=this.state.Mod;
            return Mod&&<Mod  {...this.props}/>;
        }
    }
    

    About

    import React from 'react';
    export default props => <div>About</div>
    
    展开全文
  • webpack4系列教程

    2018-12-03 14:42:48
  • webpack 搭建前端模块化脚手架 webpack简介 官网地址 引用官网的一段描述:webpack是一个现代的javascript应用程序的静态模块打包器,在webpack处理应用程序时他会递归的创建一个依赖关系图,其中包含应用程序的需要...
  • webpack4使用过程

    2018-11-02 11:46:13
    1、新建工程,如webpack_prac 2、在工程文件路径下,执行 npm init 命令初始化项目  命令行会要你输入一些配置信息,我们这里一路按回车下去,生成一个默认的项目配置文件 package.json。 3、安装webpack  ...
  • webpack4.+的使用(一) 一、webpack的基本使用 1、安装和卸载webpack开发依赖的命令分别为:npm install webpack -g和npm uninstall webpack -g(npm命令是在安装了node.js后才有的,故应预先装了node.js) 2、在...
  • webpack 4 作为零配置模块打包器 webpack 功能强大,具有许多独特的功能,但其中一个难点就是配置文件。 为中型到大型项目提供 webpack 配置并不是什么大问题。 没有它感觉你无法活了。然而,对于小一点的项目来说...
  • webpack4配置

    千次阅读 2018-11-15 18:29:36
    经常会有群友问起webpack、react、redux、甚至create-react-app配置等等方面的问题,有些是我也不懂的,慢慢从大家的相互交流中,也学到了不少。 ​  今天就尝试着一起来聊聊Webpack吧,旨在帮大家加深理解、新手...
  • 初探webpack4

    千次阅读 2018-06-10 14:56:01
    2018/2/25,webpack4正式发布,距离现在已经过去三个多月了,也逐渐趋于稳定,而且现在的最新版本都到了4.12.0(版本迭代快得真是让人害怕)。 很多人都说webpack复杂,难以理解,很大一部分原因是webpack是基于...
  • 本文主要从webpack4.x入手,会对平时常用的Webpack配置一一讲解,各个功能点都有对应的详细例子,所以本文也比较长,但如果你能动手跟着本文中的例子完整写一次,相信你会觉得Webpack也不过如此。 一、什么是...
  • webpack4 兼容老项目中的 require.js

    万次阅读 2019-08-05 20:57:33
    项目使用 require.js 进行模块化编程,并...require.js 使用 AMD 语法,webpack同样支持AMD语法,迁移成本较低,因此将 gulp 迁移至 webpack 4.38.0。 开始 先看一下requirejs.config requirejs.config({ baseUrl:...
  • webpack4.x开发环境配置

    万次阅读 多人点赞 2018-03-09 23:14:36
    写这篇文章的初衷在于,虽然网络上关于webpack的教程不少,但是大多已经过时,由于webpack版本更新后许多操作变化很大...为此,笔者进行了最新版配置的探索,使用的是windows操作系统,如果你的是webpack4.x版本,可...
  • webpack4打包优化配置

    千次阅读 2019-05-31 10:11:37
    1、对图片进行压缩和...image-webpack-loader可以帮助我们对图片进行压缩和优化 cnpm install image-webpack- --save-dev 复制代码 { test: /\.(png|svg|jpg|gif|jpeg|ico)$/, use: [ 'file-loader', { loade...
  • webpack4.x入门

    2018-05-01 16:07:09
    Webpack4webapck概念本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每...
  • webpack4升级指南以及从webpack3.x迁移

    万次阅读 2018-03-05 16:35:47
    &nbsp;&nbsp;&nbsp;&nbsp;几天前webpack发布了新版本v4.0.0,其中做了很多改动,包括0配置以及移除了... 题外话:不要看0配置是很有噱头,基本是能满足大部分用户啊的需求,不过加...
  • webpack4笔记

    2018-03-30 16:52:23
    对于webpack的概念类东西多做解释,感兴趣可以去参考官方文档 ,主要记录如何去使用webpack4 开始一个项目 安装好了之后,使用命令行npm init来初始化一个项目,接下来对生成的package.json文件进行处理: 安装...
  • webpack4

    千次阅读 2018-02-28 15:30:05
    还好前面写webpack3.x稍微赶上了...包含了大量的特性更新, 以及极大的性能优化(最高可达 98%)Webpack 4 中移除了 CommonsChunkPlugin, 替换以一系列默认的配置以及简单的 optimize.splitChunks 接口同时 Webpack 4 ...
  • webpack4官方发布以来,很多博主都已经上手开撸了,但是大体都是对着API新配置一份,我今天尝试了一下将我们公司的webpack2项目迁移到webpack4,下面是记录的几个坑。一、环境准备 1、node 6.10+ 2、下载webpack4...
  • webpack环境安装 webpack配置 github详细代码地址:https://gitee.com/CarrieProject/weback4_configuration webpack环境安装 创建webpack-course文件  在这个webpack-course文件里创建3个文件  mkdir src ...
  • Webpack4-的安装和使用

    2019-07-11 10:52:03
    1.Webpack安装 在用 Webpack 执行构建任务时需要通过 webpack 可执行文件去启动构建任务,所以需要安装 webpack 可执行文件。 ( 例如:webpack --config webpack.config.js ) 在安装 Webpack工具前请确保你的系统...
  • Webpack是当下使用人数最多的网页打包工具。当前其github主页的star数量为49.2k,比另一个流行的打包工具parcel(31.9k)要高不少。本人(小白一枚)由于项目需要的原因,最近几个月断断续续学习和使用webpack进行多...
  • webpack4打包流程总结

    千次阅读 2018-08-31 16:08:48
    webpack4入门   前提 已安装node(版本号&gt;4.0,已自带NPM) mac机器 有一个空目录 要实现的功能 JSX语法,ES6语法,LESS语法编写的模块转化为浏览器可执行的模块 代码的混淆压缩 多页面多入口 提取...
  • Webpack4使用教程

    千次阅读 2018-05-17 20:02:37
    1.安装 要安装最新版本或特定版本,请运行以下命令之一: npm install --save-dev webpack ... 如果使用 webpack 4+ 版本,还需要安装 CLI。 npm install --save-dev webpack-cli 基本...
  • Webpack4 升级全教程

    万次阅读 2018-05-16 00:19:08
    webpack4 发版也有一段时间了,发现 vue-cli 还是基于 webpack3 ,于是想着升级一个项目模板。 这里是升级后的项目,可以直接使用。=&amp;amp;amp;amp;gt; 项目模板在这里,relase@4分之下 整体而言坑还是很...
  • 如果你喜欢这系列的文章,欢迎star我的项目,源码地址,点击... 生产环境代码压缩 ... 可以先打开 bin/css/app.css 文件,会发现,css 文件格式是未压缩的 之前的章节中已经抽取了 css 文件,用到了 mini-css-extrac...
  • webpack4.x实现多页面打包配置

    千次阅读 2019-01-28 02:25:01
    但是希望最后利用webpack打包项目,对项目体积优化,代码优。实现图片代码压缩 项目中需要用到 jq, rem适配,项目有缓存处理机制。 二:1.先看一下如下我的项目目录结构: 2.根目录创建的webpack.config.js 文件...
  • webpack4.x入门到进阶

    千人学习 2018-04-18 14:14:23
    本课程由老潇(陈潇冰)带大家,掌握webpack4.x的使用,包含工作中常用的插件使用,技巧使用、以及学习思路,初级可以很好的入门,有经验的人可以系统学习。
  • webpack4.x初步配置vue项目

    千次阅读 2018-08-27 11:46:51
    参考vue-cli webpack模板, 用 webpack4.x配置了vue项目 开始 与browserify不同,webpack是配置式的,所以我会先把配置文件写上,并在文件里面写好注释 项目结构 |-- webpack-demo | |-- build | | |-- webpack.base...
  • webpack4 公共模块打包

    2019-04-02 17:19:04
    此时webpack版本为:4.29.6 从webpack v4开始,CommonsChunkPlugin就被删除不再适用,取而代之是optimization.splitChunks 但是对于入门的人来说,肯定会没注意一句话:New chunk would be bigger than 30kb ...

空空如也

1 2 3 4 5 ... 20
收藏数 173,250
精华内容 69,300
关键字:

webpack4