webpack 压缩代码后变成一行_webpack打包压缩代码压缩了哪些东西 - CSDN
精华内容
参与话题
  • webpack 代码压缩优化篇

    千次阅读 2017-10-24 17:46:07
    Webpack 默认提供的 UglifyJS 插件,由于采用单线程压缩,速度颇慢 ;推荐采用 webpack-parallel-uglify-plugin 插件,她可以并行运行 UglifyJS 插件,更加充分而合理的使用 CPU 资源,这可以大大减少的构建时间;...
    Webpack 默认提供的 UglifyJS 插件,由于采用单线程压缩,速度颇慢 ;推荐采用 webpack-parallel-uglify-plugin 插件,她可以并行运行 UglifyJS 插件,更加充分而合理的使用 CPU 资源,这可以大大减少的构建时间;当然,该插件应用于生产环境而非开发环境,其做法如下,

    new webpack.optimize.UglifyJsPlugin({
      compress{
        warningsfalse
      },
      sourceMaptrue
    })

    替换如上自带的 UglifyJsPlugin 写法为如下配置即可:

    var ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin');
    new ParallelUglifyPlugin({
      cacheDir'.cache/',
      uglifyJS:{
        output{
          commentsfalse
        },
        compress{
          warningsfalse
        }
      }
    })
    当然也有其他同类型的插件,比如:webpack-uglify-parallel,但根据自己实践效果来看,并没有 webpack-parallel-uglify-plugin 表现的那么卓越,有兴趣的朋友,可以更全面的做下对比,择优选用。需要额外说明的是,webpack-parallel-uglify-plugin 插件的运用,会相对 UglifyJsPlugin 打出的包,看起来略大那么一丢丢(其实可以忽略不计);
    展开全文
  • 前端面试之webpack

    万次阅读 多人点赞 2017-09-28 14:08:46
    还是以前一样,有些概念面试可能会考,我都用*标记了出来,两句话就总结清楚其余的地方如果你想了解webpack,就仔细看看,虽然本教程不能让你webpack玩的很6,但是懂操作流程够了。面试你一般问你webpack的原理,...

    https://juejin.im/post/59cb6307f265da064e1f65b9

    还是以前一样,有些概念面试可能会考,我都用*标记了出来,两句话就总结清楚其余的地方如果你想了解webpack,就仔细看看,虽然本教程不能让你webpack玩的很6,但是懂操作流程够了。面试你一般问你webpack的原理,Loader的原理,你有用那些优化措施
    前端开发已经模块化,它改进了代码库的封装和结构。打包工具已经成为了一个项目必不可少的部分,
    如今这儿有几种可能的选择,例如webpack,grunt,gulp等。
    webpack因为他的功能和扩展性在过去的几年中,受到非常大的欢迎。但是webpack的配置总是让人觉得很困惑,
    今天我们将从一个空的配置文件逐步完成一个完整的设置进行打包文件。

    概念

    不像大多数的模块打包机,webpack是收把项目当作一个整体,通过一个给定的的主文件,webpack将从这个文件开始找到你的项目的所有依赖文件,使用loaders处理它们,最后打包成一个或多个浏览器可识别的js文件

    install

    首先添加我们即将使用的包:

    npm install webpack webpack-dev-server --save-dev

    webpack是我们需要的模块打包机,webpack-dev-server用来创建本地服务器,监听你的代码修改,并自动刷新修改后的结果。这些是有关devServer的配置

    contentBase,  // 为文件提供本地服务器
    port, // 监听端口,默认8080
    inline, // 设置为true,源文件发生改变自动刷新页面
    historyApiFallback  // 依赖HTML5 history API,如果设置为true,所有的页面跳转指向index.html
    devServer:{
        contentBase: './src' // 本地服务器所加载的页面所在的目录
        historyApiFallback: true, // 不跳转
        inline: true // 实时刷新
    }
    然后我们在根目录下创建一个'webpack.config.js',在'package.json'添加两个命令用于本地开发和生产发布
    
    
    "scripts": {
                "start": "webpack-dev-server",
                "build": "webpack"
            }

    在使用webpack命令的时候,他将接受webpack的配置文件,除非我们使用其他的操作

    entry

    entry: 用来写入口文件,它将是整个依赖关系的根

    var baseConfig = {
            entry: './src/index.js'
        }

    当我们需要多个入口文件的时候,可以把entry写成一个对象

    var baseConfig = {
            entry: {
                main: './src/index.js'
            }
        }

    我建议使用后面一种方法,因为他的规模会随你的项目增大而变得繁琐

    output

    output: 即使入口文件有多个,但是只有一个输出配置

    var path = require('path')
        var baseConfig = {
            entry: {
                main: './src/index.js'
            },
            output: {
                filename: 'main.js',
                path: path.resolve('./build')
            }
        }
        module.exports = baseConfig

    如果你定义的入口文件有多个,那么我们需要使用占位符来确保输出文件的唯一性

    output: {
            filename: '[name].js',
            path: path.resolve('./build')
        }

    如今这么少的配置,就能够让你运行一个服务器并在本地使用命令npm start或者npm run build来打包我们的代码进行发布

    Loader

    loader的作用
    1、实现对不同格式的文件的处理,比如说将scss转换为css,或者typescript转化为js
    2、转换这些文件,从而使其能够被添加到依赖图中
    loader是webpack最重要的部分之一,通过使用不同的Loader,我们能够调用外部的脚本或者工具,实现对不同格式文件的处理,loader需要在webpack.config.js里边单独用module进行配置,配置如下:

    test: 匹配所处理文件的扩展名的正则表达式(必须)
        loader: loader的名称(必须)
        include/exclude: 手动添加处理的文件,屏蔽不需要处理的文件(可选)
        query: 为loaders提供额外的设置选项
        ex: 
            var baseConfig = {
                // ...
                module: {
                    rules: [
                        {
                            test: /*匹配文件后缀名的正则*/,
                            use: [
                                loader: /*loader名字*/,
                                query: /*额外配置*/
                            ]
                        }
                    ]
                }
            }

    要是loader工作,我们需要一个正则表达式来标识我们要修改的文件,然后有一个数组表示
    我们表示我们即将使用的Loader,当然我们需要的loader需要通过npm 进行安装。例如我们需要解析less的文件,那么webpack.config.js的配置如下:

    var baseConfig = {
                    entry: {
                        main: './src/index.js'
                    },
                    output: {
                        filename: '[name].js',
                        path: path.resolve('./build')
                    },
                    devServer: {
                        contentBase: './src',
                        historyApiFallBack: true,
                        inline: true
                    },
                    module: {
                        rules: [
                            {
                                test: /\.less$/,
                                use: [
                                    {loader: 'style-loader'},
                                    {loader: 'css-loader'},
                                    {loader: 'less-loader'}
                                ],
                                exclude: /node_modules/
                            }
                        ]
                    }
                }

    这里介绍几个常用的loader:
    babel-loader: 让下一代的js文件转换成现代浏览器能够支持的JS文件。
    babel有些复杂,所以大多数都会新建一个.babelrc进行配置
    css-loader,style-loader:两个建议配合使用,用来解析css文件,能够解释@import,url()如果需要解析less就在后面加一个less-loader
    file-loader: 生成的文件名就是文件内容的MD5哈希值并会保留所引用资源的原始扩展名
    url-loader: 功能类似 file-loader,但是文件大小低于指定的限制时,可以返回一个DataURL事实上,在使用less,scss,stylus这些的时候,npm会提示你差什么插件,差什么,你就安上就行了

    Plugins

    plugins和loader很容易搞混,说都是外部引用有什么区别呢? 事实上他们是两个完全不同的东西。这么说loaders负责的是处理源文件的如css、jsx,一次处理一个文件。而plugins并不是直接操作单个文件,它直接对整个构建过程起作用下面列举了一些我们常用的plugins和他的用法
    ExtractTextWebpackPlugin: 它会将入口中引用css文件,都打包都独立的css文件中,而不是内嵌在js打包文件中。下面是他的应用

    var ExtractTextPlugin = require('extract-text-webpack-plugin')
            var lessRules = {
                use: [
                    {loader: 'css-loader'},
                    {loader: 'less-loader'}
                ]
            }
    
            var baseConfig = {
                // ... 
                module: {
                    rules: [
                        // ...
                        {test: /\.less$/, use: ExtractTextPlugin.extract(lessRules)}
                    ]
                },
                plugins: [
                    new ExtractTextPlugin('main.css')
                ]
            }

    HtmlWebpackPlugin:
    作用: 依据一个简单的index.html模版,生成一个自动引用你打包后的js文件的新index.html

    var HTMLWebpackPlugin = require('html-webpack-plugin')
                var baseConfig = {
                    // ...
                    plugins: [
                        new HTMLWebpackPlugin()
                    ]
                }

    HotModuleReplacementPlugin: 它允许你在修改组件代码时,自动刷新实时预览修改后的结果注意永远不要在生产环境中使用HMR。这儿说一下一般情况分为开发环境,测试环境,生产环境。
    用法如 new webpack.HotModuleReplacementPlugin()
    webapck.config.js的全部内容

    const webpack = require("webpack")
            const HtmlWebpackPlugin = require("html-webpack-plugin")
            var ExtractTextPlugin = require('extract-text-webpack-plugin')
            var lessRules = {
                use: [
                    {loader: 'css-loader'},
                    {loader: 'less-loader'}
                ]
            }
            module.exports = {
                entry: {
                        main: './src/index.js'
                    },
                    output: {
                        filename: '[name].js',
                        path: path.resolve('./build')
                    },
                    devServer: {
                        contentBase: '/src',
                        historyApiFallback: true,
                        inline: true,
                        hot: true
                    },
                    module: {
                        rules: [
                            {test: /\.less$/, use: ExtractTextPlugin.extract(lessRules)}
                        ]
                    },
                    plugins: [
                    new ExtractTextPlugin('main.css')
                ]
            }

    产品阶段的构建

    目前为止,在开发阶段的东西我们已经基本完成了。但是在产品阶段,还需要对资源进行别的
    处理,例如压缩,优化,缓存,分离css和js。首先我们来定义产品环境

    var ENV = process.env.NODE_ENV
        var baseConfig = {
            // ... 
            plugins: [
                new webpack.DefinePlugin({
                    'process.env.NODE_ENV': JSON.stringify(ENV)
                })
            ]
        }

    然后还需要修改我们的script命令

    "scripts": {
                "start": "NODE_ENV=development webpack-dev-server",
                "build": "NODE_ENV=production webpack"
            }

    process.env.NODE_ENV 将被一个字符串替代,它运行压缩器排除那些不可到达的开发代码分支。
    当你引入那些不会进行生产的代码,下面这个代码将非常有用。

    if (process.env.NODE_ENV === 'development') {
                console.warn('这个警告会在生产阶段消失')
            }

    优化插件

    下面介绍几个插件用来优化代码
    OccurenceOrderPlugin: 为组件分配ID,通过这个插件webpack可以分析和优先考虑使用最多 的模块,然后为他们分配最小的ID
    UglifyJsPlugin: 压缩代码
    下面是他们的使用方法
    var baseConfig = {
    // ...
    new webpack.optimize.OccurenceOrderPlugin()
    new webpack.optimize.UglifyJsPlugin()
    }
    然后在我们使用npm run build会发现代码是压缩的

    总结

    webpack的配置文件的复杂度,依赖于你项目的需要。小心的运用他们。因为随着项目的增长,它们会变得很难驯服。内容有点多,事实上总结起来也不是特别多,也就Loader,plugins。其他的地方都比较简单。这篇文章大概花了我三天的时间,网上看各种教程,然后看官网,真挺累的。这儿写完我就去睡觉

    展开全文
  • webpack 热更新(实施同步刷新)

    万次阅读 2017-11-03 12:00:34
    解决方案:实现热更新,首先,安装系列的node命令,如果嫌麻烦,你可以直接看解决方案二,相对来说比较简单。1、webpack命令安装npm install webpack -g npm initnpm init -yes //可以创建默认的package.json ...

    解决方案一:


    实现热更新,首先,安装一系列的node命令,如果嫌麻烦,你可以直接看解决方案二,相对来说比较简单。

    1、webpack命令安装
    npm install webpack -g  
    
    npm init
    
    npm init -yes //可以创建默认的package.json 
    
    npm install webpack --save-dev  
    
    npm install  path fs html-webpack-plugin extract-text-webpack-plugin autoprefixer webpack-dev-server --save-dev
    
    npm install css-loader style-loader --save-dev//样式文件,我们需要两种loader,css-loader 和 style-loader,css-loader会遍历css文件,找到所有的url(...)并且处理。style-loader会把所有的样式插入到你页面的一个style tag中。

    webpack 使用命令:(知道有这个东西就行,这里不做过多介绍)

    webpack --config XXX.js //使用另一份配置文件(比如webpack.config2.js)来打包
    
    webpack --watch //监听变动并自动打包
    
    webpack -p//压缩混淆脚本,这个非常非常重要!
    
    webpack -d//生成map映射文件,告知哪些模块被最终打包到哪里了
    
    其中的 -p 是很重要的参数,曾经一个未压缩的 700kb 的文件,压缩后直接降到 180kb (主要是样式这块一句就独占一行脚本,导致未压缩脚本变得很大) 。
    


    2、webpack 支持es6转码安装

    //安装转码规则
    npm install babel-core babel-loader babel-preset-es2015 babel-preset-react babel-preset-stage-0 –save-dev


    3、webpack + es6 + react 安装命令:

    npm install  react react-dom react-router react-hot-loader css-loader  jsx-loader --save-dev  
    
    //react-hot-loader 是一款非常好用的 React 热插拔的加载插件,通过它可以实现修改-运行同步的效果,配合 webpack-dev-server 使用更佳!


    附注:

    css加载不出来的时候或者报错的时候(ERROR Module not found: Error: Cannot resolve module ‘style’ in D:\workspace\HBuilder React_Probject\webPack-demo1\webpck\app)

    执行这两个命令:

    $ npm i style-loader -D
    
    $ npm i css-loader -D



    只要你按照命令安装,即可实现,接下来我附加上我的实现代码:需要几个文件:

    1、package.json文件

    在package.json文件中为scripts添加,方便使用命令:

    最终package.json文件如下

      "scripts": {
        "start": "node dev-serve.js"
      },



    最终package.json文件如下:

    {
      "name": "yubai",
      "description": "Utility components for react js",
      "version": "1.1.1",
      "keywords": [
        "react-component",
        "react-utils",
        "react utility"
      ],
      "scripts": {
        "start": "node dev-serve.js"
      },
      "src": "src",
      "test": "test",
      "dist": "dist",
      "mainInput": "ReactUtils",
      "mainOutput": "main",
      "dependencies": {
        "async": "^0.9.0",
        "backbone": "^1.1.2",
        "bootstrap": "^3.2.0",
        "es6-promise": "^1.0.0",
        "flux": "^2.0.1",
        "font-awesome": "^4.2.0",
        "humps": "0.0.1",
        "jquery": "^2.1.1",
        "jquery.ui.widget": "^1.10.3",
        "json5": "^0.2.0",
        "less": "^1.7.5",
        "less-loader": "^0.7.7",
        "lodash": "^2.4.1",
        "moment": "^2.8.3",
        "normalizr": "^0.1.2",
        "q": "^1.0.1",
        "react-hot-loader": "^0.4.5",
        "rimraf": "^2.2.8",
        "routes": "^1.2.0",
        "superagent": "^0.18.2",
        "codemirror": "3.20.0"
      },
      "repository": {
        "type": "git",
        "url": "git+ssh://git@github.com/sahusoftcom/react-utils.git"
      },
      "devDependencies": {
        "autoprefixer": "^6.6.1",
        "babel-core": "^6.21.0",
        "babel-loader": "^6.2.10",
        "babel-preset-es2015": "^6.18.0",
        "babel-preset-react": "^6.16.0",
        "css-loader": "^0.6.12",
        "extract-text-webpack-plugin": "^1.0.1",
        "fs": "0.0.1-security",
        "gulp": "^3.8.8",
        "gulp-concat": "^2.4.0",
        "gulp-jshint": "^1.8.4",
        "gulp-rename": "^1.2.0",
        "gulp-sass": "^0.7.3",
        "gulp-uglify": "^1.0.1",
        "gulp-util": "^3.0.1",
        "html-webpack-plugin": "^2.26.0",
        "jshint-loader": "~0.6.0",
        "jsx-loader": "^0.11.2",
        "karma": "~0.10.9",
        "karma-chrome-launcher": "~0.1.2",
        "karma-firefox-launcher": "~0.1.3",
        "karma-jasmine": "~0.1.5",
        "karma-phantomjs-launcher": "~0.1.1",
        "karma-script-launcher": "~0.1.0",
        "karma-webpack-plugin": "~1.0.0",
        "path": "^0.12.7",
        "postcss-loader": "^1.2.1",
        "react": "^15.4.2",
        "react-dom": "^15.4.2",
        "react-hot-loader": "^0.4.5",
        "react-router": "^3.0.0",
        "style-loader": "^0.6.5",
        "url-loader": "~0.5.4",
        "webpack": "^1.14.0",
        "webpack-dev-server": "^1.16.2"
      },
      "bugs": {
        "url": "https://github.com/sahusoftcom/react-utils/issues"
      },
      "homepage": "https://github.com/sahusoftcom/react-utils#readme",
      "main": "app.js",
      "author": "yubai",
      "license": "ISC"
    }
    

    以上代码请注意这里,标红部位

    这里写图片描述



    2、webpack.config.js文件(webpack主文件)

    var webpack = require('webpack'),
        path = require('path'),
        fs = require('fs'),
        HtmlWebpackPlugin = require('html-webpack-plugin'),
        ExtractTextPlugin = require('extract-text-webpack-plugin');
    
    module.exports = {
        entry: {
            app: ["./app.js"]
        },
        output: { //输出目录
            path: __dirname + './__build__',
            publicPath: "",
            filename: 'shared.js',
            chunkFilename: '[name].[chunkhash:3].min.js',
        },
        module: { //在配置文件里添加JSON loader
            loaders: [{
                test: /\.js$/,
                exclude: /^node_modules$/,
                loader: 'babel-loader'
            }, {
                test: /\.css$/,
                exclude: /^node_modules$/,
                loader: ExtractTextPlugin.extract('style', ['css', 'autoprefixer'])
            }, {
                test: /\.less$/,
                exclude: /^node_modules$/,
                loader: ExtractTextPlugin.extract('style', ['css', 'autoprefixer', 'less'])
            }, {
                test: /\.scss$/,
                exclude: /^node_modules$/,
                loader: ExtractTextPlugin.extract('style', ['css', 'autoprefixer', 'sass'])
            }, {
                test: /\.(eot|woff|svg|ttf|woff2|gif|appcache)(\?|$)/,
                exclude: /^node_modules$/,
                loader: 'file-loader?name=[name].[ext]'
            }, {
                test: /\.(png|jpg|gif)$/,
                exclude: /^node_modules$/,
                loader: 'url-loader?limit=8192&name=images/[hash:8].[name].[ext]'
                    //注意后面那个limit的参数,当你图片大小小于这个限制的时候,会自动启用base64编码图
            }, {
                test: /\.jsx$/,
                exclude: /^node_modules$/,
                //loaders: ['jsx', 'babel'],//1.0的配置
                loaders: ['jsx-loader', 'babel-loader'],//2.0++ 必须加上 loader
            }]
        },
        resolve: {
            //extensions: ['', '.js', '.json'],
            extensions: ['.js', '.json'],//webpack 2.0以上的配置 2017-11-03改
        },
        postcss: [
            require('autoprefixer') //调用autoprefixer插件,加入各个浏览器的前缀
        ],
        plugins: [
            new HtmlWebpackPlugin({
                template: './index.html'
            }),
            new ExtractTextPlugin('[name]-[hash:3].css'), //css随机数
            new webpack.HotModuleReplacementPlugin(), //热加载插件
            new webpack.DefinePlugin({
                'process.env.NODE_ENV': '"development"'
            }),
            new webpack.NoErrorsPlugin()
        ]
    };



    3、webpack服务文件:dev-serve.js

    var config = require("./webpack.config.js");
    var webpack = require('webpack');
    var WebpackDevServer = require('webpack-dev-server');
    
    config.entry.app.unshift("webpack-dev-server/client?http://localhost:8099/");
    
    var compiler = webpack(config);
    var server = new WebpackDevServer(compiler, {
        publicPath: config.output.publicPath,
        stats: {
            colors: true
        }
    });
    server.listen(8099);

    这里注意下内容,

    这里写图片描述



    我的app.js是这么配置的,很简单,

    app.js文件

    import React from 'react'
    import { render } from 'react-dom'
    import { Router, Route, IndexRoute, Link, IndexLink, hashHistory } from 'react-router'
    
    alert("AAA");

    安装完成webpack命令之后,

    运行 npm start 命令 ,即可实现本地实施同步开发!

    接下来就编写你的代码即可!


    全部代码在这里:在这里



    解决方案二:(推荐使用)


    操作步骤:

    1、安装完Node之后,为了保证速度,需要使用淘宝镜像,命令如下:

    1npm config set registry "http://registry.npm.taobao.org"2npm config list  可以查看配置  

    2.安装完nodejs之后,打开终端,执行命令:

    (1)npm install webpack -g  
    
    //-g的意思是安装全局的webpack,但是我们实际的开发中还需要针对单个的项目进行webpack安装,执行命令:
    

    3、使用 npm init 初始化,生成 package.json 文件:执行命令:

      1. npm init 自定义创建package.json  
      2. npm init -yes 可以创建默认的package.json  

    现在我们的项目已经创建好了,接下来我们来添加依赖包及插件

    (1) 局部安装Webpack,执行命令:

    npm install webpack --save-dev  



    (2)安装React,–save 命令用于将包添加至 package.json 文件,执行命令:

    npm install  react react-dom react-router react-hot-loader css-loader  jsx-loader html-webpack-plugin --save-dev 



    (3) 安装babel插件,babel插件是webpack需要的加载器,如果没有这几个加载器我们的jsx语法,和es2015语法就会报错。

    npm install babel-loader babel-core babel-preset-es2015 babel-preset-react babel-preset-stage-0 --save-dev  



    (4)安装自动刷新热更新服务,安装webpack-dev-server执行命令:

    npm install webpack-dev-server --save-dev



    (5)在package.json文件中为scripts添加,方便使用开启服务命令:

    "scripts": {  
        "build": "webpack",  
        "dev": "webpack-dev-server --devtool eval --progress --colors --content-base build"  
    }  

    package.json全部文件附上:

    {
      "name": "yubai8",
      "version": "1.1.1",
      "main": "index.js",
      "dependencies": {},
      "devDependencies": {
        "html-webpack-plugin": "^2.26.0",
        "webpack-dev-server": "^1.16.2"
      },
      "scripts": {
        "build": "webpack",
        "dev": "webpack-dev-server --devtool eval --progress --colors --content-base build"
      },
      "author": "",
      "license": "ISC",
      "keywords": [],
      "description": ""
    }
    

    这里有一点提醒大家,package.json中name不能跟我们的模块和项目文件目录同名!



    安装完命令之后,创建webpack的配置文件:webpack.config.js文件

    webpack.config.js文件配置如下:

    var path = require('path'),
        webpack = require('webpack'),
        HtmlWebpackPlugin = require('html-webpack-plugin');
    module.exports = {
        entry: ['webpack/hot/dev-server', path.resolve(__dirname, './app.js')],
        output: {
            path: path.resolve(__dirname, './__build__'),
            filename: 'bundle.js'
        },
        devServer: {
            inline: true,
            port: 8099
        },
        module: {
            loaders: [{
                test: /\.js?$/,
                exclude: /(node_modules|bower_components)/,
                loader: 'babel',
                query: {
                    presets: ['es2015', 'react']
                }
    
            }]
        },
        plugins: [
            new HtmlWebpackPlugin({
                template: './index.html'
            }),
            new webpack.HotModuleReplacementPlugin()
        ]
    };

    上面第五行 ‘./app.js’ 是你的js入口文件

    解决方案二:链接地址



    安装完成之后运行命令

    1、根目录下执行命令,其中一个:

    npm run build         线上目录
    
    npm run dev           开发目录

    2.浏览器直接访问:

    http://localhost:8099/index.html

    ok,完成!


    2017-11加

    webpack最近更新版在 在这里

    展开全文
  • vue第五天

    万次阅读 2020-01-04 12:38:40
    Vue.js - Day5 - Webpack 在网页中会引用哪些常见的静态资源? JS .js .jsx .coffee .ts(TypeScript 类 C# 语言) CSS .css .less .sass .scss Images .jpg .png .gif .bmp .svg 字体文件(Fonts) ...

    Vue.js - Day5 - Webpack

    在网页中会引用哪些常见的静态资源?

    • JS
    • .js .jsx .coffee .ts(TypeScript 类 C# 语言)
    • CSS
    • .css .less .sass .scss
    • Images
    • .jpg .png .gif .bmp .svg
    • 字体文件(Fonts)
    • .svg .ttf .eot .woff .woff2
    • 模板文件
    • .ejs .jade .vue【这是在webpack中定义组件的方式,推荐这么用】

    网页中引入的静态资源多了以后有什么问题???

    1. 网页加载速度慢, 因为 我们要发起很多的二次请求;
    2. 要处理错综复杂的依赖关系

    如何解决上述两个问题

    1. 合并、压缩、精灵图、图片的Base64编码
    2. 可以使用之前学过的requireJS、也可以使用webpack可以解决各个包之间的复杂依赖关系;

    什么是webpack?

    webpack 是前端的一个项目构建工具,它是基于 Node.js 开发出来的一个前端工具;

    如何完美实现上述的2种解决方案

    1. 使用Gulp, 是基于 task 任务的;
    2. 使用Webpack, 是基于整个项目进行构建的;
    • 借助于webpack这个前端自动化构建工具,可以完美实现资源的合并、打包、压缩、混淆等诸多功能。
    • 根据官网的图片介绍webpack打包的过程
    • webpack官网

    webpack安装的两种方式

    1. 运行npm i webpack -g全局安装webpack,这样就能在全局使用webpack的命令
    2. 在项目根目录中运行npm i webpack --save-dev安装到项目依赖中

    初步使用webpack打包构建列表隔行变色案例

    1. 运行npm init初始化项目,使用npm管理项目中的依赖包
    2. 创建项目基本的目录结构
    3. 使用cnpm i jquery --save安装jquery类库
    4. 创建main.js并书写各行变色的代码逻辑:
    	// 导入jquery类库
        import $ from 'jquery'
    
        // 设置偶数行背景色,索引从0开始,0是偶数
        $('#list li:even').css('backgroundColor','lightblue');
        // 设置奇数行背景色
        $('#list li:odd').css('backgroundColor','pink');
    
    1. 直接在页面上引用main.js会报错,因为浏览器不认识import这种高级的JS语法,需要使用webpack进行处理,webpack默认会把这种高级的语法转换为低级的浏览器能识别的语法;
    2. 运行webpack 入口文件路径 输出文件路径main.js进行处理:
    webpack src/js/main.js dist/bundle.js
    

    使用webpack的配置文件简化打包时候的命令

    1. 在项目根目录中创建webpack.config.js
    2. 由于运行webpack命令的时候,webpack需要指定入口文件和输出文件的路径,所以,我们需要在webpack.config.js中配置这两个路径:
        // 导入处理路径的模块
        var path = require('path');
    
        // 导出一个配置对象,将来webpack在启动的时候,会默认来查找webpack.config.js,并读取这个文件中导出的配置对象,来进行打包处理
        module.exports = {
            entry: path.resolve(__dirname, 'src/js/main.js'), // 项目入口文件
            output: { // 配置输出选项
                path: path.resolve(__dirname, 'dist'), // 配置输出的路径
                filename: 'bundle.js' // 配置输出的文件名
            }
        }
    

    实现webpack的实时打包构建

    1. 由于每次重新修改代码之后,都需要手动运行webpack打包的命令,比较麻烦,所以使用webpack-dev-server来实现代码实时打包编译,当修改代码之后,会自动进行打包构建。
    2. 运行cnpm i webpack-dev-server --save-dev安装到开发依赖
    3. 安装完成之后,在命令行直接运行webpack-dev-server来进行打包,发现报错,此时需要借助于package.json文件中的指令,来进行运行webpack-dev-server命令,在scripts节点下新增"dev": "webpack-dev-server"指令,发现可以进行实时打包,但是dist目录下并没有生成bundle.js文件,这是因为webpack-dev-server将打包好的文件放在了内存中
    • bundle.js放在内存中的好处是:由于需要实时打包编译,所以放在内存中速度会非常快
    • 这个时候访问webpack-dev-server启动的http://localhost:8080/网站,发现是一个文件夹的面板,需要点击到src目录下,才能打开我们的index首页,此时引用不到bundle.js文件,需要修改index.html中script的src属性为:<script src="../bundle.js"></script>
    • 为了能在访问http://localhost:8080/的时候直接访问到index首页,可以使用--contentBase src指令来修改dev指令,指定启动的根目录:
    "dev": "webpack-dev-server --contentBase src"
    

    同时修改index页面中script的src属性为<script src="bundle.js"></script>

    使用html-webpack-plugin插件配置启动页面

    由于使用--contentBase指令的过程比较繁琐,需要指定启动的目录,同时还需要修改index.html中script标签的src属性,所以推荐大家使用html-webpack-plugin插件配置启动页面.

    1. 运行cnpm i html-webpack-plugin --save-dev安装到开发依赖
    2. 修改webpack.config.js配置文件如下:
        // 导入处理路径的模块
        var path = require('path');
        // 导入自动生成HTMl文件的插件
        var htmlWebpackPlugin = require('html-webpack-plugin');
    
        module.exports = {
            entry: path.resolve(__dirname, 'src/js/main.js'), // 项目入口文件
            output: { // 配置输出选项
                path: path.resolve(__dirname, 'dist'), // 配置输出的路径
                filename: 'bundle.js' // 配置输出的文件名
            },
            plugins:[ // 添加plugins节点配置插件
                new htmlWebpackPlugin({
                    template:path.resolve(__dirname, 'src/index.html'),//模板路径
                    filename:'index.html'//自动生成的HTML文件的名称
                })
            ]
        }
    
    1. 修改package.jsonscript节点中的dev指令如下:
    "dev": "webpack-dev-server"
    
    1. 将index.html中script标签注释掉,因为html-webpack-plugin插件会自动把bundle.js注入到index.html页面中!

    实现自动打开浏览器、热更新和配置浏览器的默认端口号

    注意:热更新在JS中表现的不明显,可以从一会儿要讲到的CSS身上进行介绍说明!

    方式1:

    • 修改package.json的script节点如下,其中--open表示自动打开浏览器,--port 4321表示打开的端口号为4321,--hot表示启用浏览器热更新:
    "dev": "webpack-dev-server --hot --port 4321 --open"
    

    方式2:

    1. 修改webpack.config.js文件,新增devServer节点如下:
    devServer:{
            hot:true,
            open:true,
            port:4321
        }
    
    1. 在头部引入webpack模块:
    var webpack = require('webpack');
    
    1. plugins节点下新增:
    new webpack.HotModuleReplacementPlugin()
    

    使用webpack打包css文件

    1. 运行cnpm i style-loader css-loader --save-dev
    2. 修改webpack.config.js这个配置文件:
    module: { // 用来配置第三方loader模块的
            rules: [ // 文件的匹配规则
                { test: /\.css$/, use: ['style-loader', 'css-loader'] }//处理css文件的规则
            ]
        }
    
    1. 注意:use表示使用哪些模块来处理test所匹配到的文件;use中相关loader模块的调用顺序是从后向前调用的;

    使用webpack打包less文件

    1. 运行cnpm i less-loader less -D
    2. 修改webpack.config.js这个配置文件:
    { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
    

    使用webpack打包sass文件

    1. 运行cnpm i sass-loader node-sass --save-dev
    2. webpack.config.js中添加处理sass文件的loader模块:
    { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }
    

    使用webpack处理css中的路径

    1. 运行cnpm i url-loader file-loader --save-dev
    2. webpack.config.js中添加处理url路径的loader模块:
    { test: /\.(png|jpg|gif)$/, use: 'url-loader' }
    
    1. 可以通过limit指定进行base64编码的图片大小;只有小于指定字节(byte)的图片才会进行base64编码:
    { test: /\.(png|jpg|gif)$/, use: 'url-loader?limit=43960' },
    

    使用babel处理高级JS语法

    1. 运行cnpm i babel-core babel-loader babel-plugin-transform-runtime --save-dev安装babel的相关loader包
    2. 运行cnpm i babel-preset-es2015 babel-preset-stage-0 --save-dev安装babel转换的语法
    3. webpack.config.js中添加相关loader模块,其中需要注意的是,一定要把node_modules文件夹添加到排除项:
    { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }
    
    1. 在项目根目录中添加.babelrc文件,并修改这个配置文件如下:
    {
        "presets":["es2015", "stage-0"],
        "plugins":["transform-runtime"]
    }
    
    1. 注意:语法插件babel-preset-es2015可以更新为babel-preset-env,它包含了所有的ES相关的语法;

    相关文章

    babel-preset-env:你需要的唯一Babel插件
    Runtime transform 运行时编译es6

    展开全文
  • webpack超详细配置, 使用教程(图文)

    万次阅读 多人点赞 2018-12-24 11:33:54
    博主在这里就不详细介绍webpack来源以及作用了, 本篇博文面向新手主要说明如何配置webpack, 以及webpack的使用方法, 直到创建出个合理的属于自己webpack项目.流程webpack安装 Step 1: 首先安装Node.js, 可以去Node...
  • webpack完整教程(

    千次阅读 2017-05-22 22:45:00
    1,webpack是当前最火的项目压缩打包工具了吧!他的目标是把所有的包括js,css,image等都打包进个bundle.js文件中,最后只需要引入这么个文件就好了。2,webpack是在node环境下使用的,使用webpack之前必须先...
  • webpack3终极配置及其优化(react)

    千次阅读 2018-08-09 09:43:46
    本文主要研究webpack3版本的react项目配置。 webpack的原理 webpack几大概念 webpack执行流程 webpack如何解析文件与文件之间的联系? 为什么要使用loader? 为什么要使用plugin? webpack的基础搭建 基本...
  • 学习Webpack)之 初识webpack

    千次阅读 2018-12-21 00:00:44
    学习Webpack)之 初识webpack webpack简介 在官网中说,webpack个现代javaScript应用程序的静态模块打包器。他可以分为入口(entry)、出口(output)、转换器 (loader)、插件(plugins)四个模块。通过...
  • 初探webpack4

    千次阅读 2018-06-10 22:17:59
    、前言 2018/2/25,webpack4正式发布,距离现在已经过去三个多月了,也逐渐趋于稳定,而且现在的最新版本都到了4.12.0(版本迭代快得真是让人害怕)。 很多人都说webpack复杂,难以理解,很大部分原因是...
  • webpack面试部分

    千次阅读 多人点赞 2019-01-18 11:53:42
    Webpack面试问题 1、webpack打包原理 把所有依赖打包成一个 bundle.js 文件,通过代码分割成单元片段并按需加载。 2、webpack的优势 (1) webpack 是以 commonJS 的形式来书写脚本滴,但对 AMD/CMD 的支持也很全面...
  • 算起来有好几个月没记录学习的东西了,自己确实懒了。。。 在这期间 1、看完了 underscore.js 的源码,分析了下公司项目中在vue-cli基础上扩展的一些webpack配置 2、开始了学习react,并利用 react 开始重写...
  • webpack】插件 plugins

    千次阅读 2019-08-21 11:09:54
    webpack 插件是个具有 apply 属性的 JavaScript 对象。apply 属性会被 webpack compiler 调用,并且 compiler 对象可在整个编译生命周期访问。如ConsoleLogOnBuildWebpackPlugin.js: class Co...
  • 小时包教会 —— webpack 入门指南

    万次阅读 2015-10-19 15:29:00
    webpack是近期最火的款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX)、coffee、样式(含less/sass)、图片等都作为模块来使用和处理。 我们可以直接使用 require(XXX) 的形式来引入各模块,即使它们...
  • 使用vue+webpack的多页面框子

    万次阅读 2016-09-13 18:09:17
    首先,要大概知道webpack是什么,webpack的插件都是做什么用的,vue是什么,然后看完之后也可以去补充一下这些方面的知识。第步:安装环境需要安装的有: nodejs,并添加入环境变量PATH 使用nodejs安装vue-cli ...
  • Webpack 之 treeShaking

    千次阅读 2018-08-22 00:05:05
    (点击上方公众号,可快速关注)来源:easonyq github.com/easonyq/easonyq.github.io/blob/master/学习记录/webpa...
  • Webpack的基本使用

    千次阅读 多人点赞 2020-06-07 18:54:47
    、什么是Webpack Webpack个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源。 从图中我们可以看出,Webpack 可以将多种静态资源 js、css、less...
  • webpack+vue2.0+nodeJs搭建环境

    万次阅读 2018-02-02 13:48:31
    webpack+vue2.0+nodeJs搭建环境 npm 和 nodejs还有淘宝镜像 npm 的全称是 nodejs包管理,现在越来越多的项目(包)都可以通过npm来安装管理,nodejs是js运行在服务器端的平台,它使得js的能力进一步提高,...
  • webpack打包流程

    万次阅读 2016-11-09 09:53:14
    webpack是近期最火的款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX)、coffee、样式(含less/sass)、图片等都作为模块来使用和处理。 我们可以直接使用 require(XXX) 的形式来引入各模块,即使它们...
  • webpack2-webpack.config.js配置

    千次阅读 2017-02-23 15:23:11
     贴webpack.ocnfig.js 的配置属性表    代码分割:  1.插件 CommonsChunkPlugin :提取vendor的插件,过滤每个入口文件,提取公共的模块,放到个vendor.js文件中    2.css代码分割  2.1...
  • webpack增量打包多页应用

    千次阅读 2019-01-09 14:14:03
    webpack打包存在的问题 webpack的打包顺序: var path = require('path'); module.exports = { entry: { one: "./src/one.js", two: "./src/two.js" }, output: { path: path....
1 2 3 4 5 ... 20
收藏数 3,707
精华内容 1,482
关键字:

webpack 压缩代码后变成一行