webpack 基础

时间  2019-11-17
标签 webpack 基础 繁體版
原文   原文链接

1. 什么是webpack

WebPack能够看作是模块打包机：它作的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。css

2. webpack核心概念

  1. Entry：入口，Webpack 执行构建的第一步将从 Entry 开始，可抽象成输入。
  2. Module：模块，在 Webpack 里一切皆模块，一个模块对应着一个文件。Webpack 会从配置的 Entry 开始递归找出全部依赖的模块。
  3. Chunk：代码块，一个 Chunk 由多个模块组合而成，用于代码合并与分割。 Loader：模块转换器，用于把模块原内容按照需求转换成新内容。
  4. Plugin：扩展插件，在 Webpack 构建流程中的特定时机注入扩展逻辑来改变构建结果或作你想要的事情。
  5. Output：输出结果，在 Webpack 通过一系列处理并得出最终想要的代码后输出结果。

3. 开始从零配置webpack

  1. 初始化配置html

    mkdir webpack-start cd webpack-start npm initvue

  2. 配置webpacknode

    yarn add webpack webpack-cli -D //webpack4把webpack拆分了 mkdir src cd src而且建立index.html, index.js mkdir dist touch webpack.config.jsreact

webpack.config.jsjquery

module.exports = {
    entry: './src/index.js', //入口文件，src下的index.js
    output: {
        path: path.join(__dirname, 'dist'), // 出口目录，dist文件
        filename: '[name].[hash].js' //这里name就是打包出来的文件名，由于是单入口，就是main，多入口下回分解
    },
    module: {},
    plugin: {},
    devServer: {}
}
复制代码

  1. 配置开发服务器webpack

    yarn add webpack-dev-server -D 修改webpack.config.js devServer: { contentBase: path.join(__dirname, "dist"), //静态文件根目录 port: 9090, // 端口 host: 'localhost', overlay: true, compress: true // 服务器返回浏览器的时候是否启动gzip压缩 } 修改package.json "script": { "build": "webpack --mode development", //这里为了避免压缩代码，用开发环境 "dev": "webpack-dev-server --open --mode development" }css3

  2. 支持css文件git

    yarn add style-loader css-loader -D // css-loader用来处理css中url的路径 // style-loader能够把css文件变成style标签插入head中 // 多个loader是有顺序要求的，从右往左写，由于转换的时候是从右往左转换的 module: { rules: { test: /.css$/, use: ['style-laoder', 'css-loader'], include: path.join(__dirname, 'src'), //限制范围，提升打包速度 exclude: /node_modules/ } }es6

  3. 支持es6，react.js等

    yarn add babel-loader babel-core babel-preset-env babel-preset-stage-0 babel-preset -react -D { test: /.js$/, use: { loader: 'babel-loader', query: { presets: ['env', 'stage-0', 'react'] // env转换es6 stage-0转es7 react转react } } } 同时能够把babel配置写到.babelrc中

  4. 从js中分离css

    yarn add extract-text-webpack-plugin -D { test: /.css$/, // 转换文件的匹配正则 use: ExtractTextWebpackPlugin.extract({ fallback: 'style-loader', //若是须要，能够在 sass-loader 以前将 resolve-url-loader 连接进来 use: ['css-loader'] }) }, //加上plugin plugins: [ new ExtractTextWebpackPlugin({ filename: 'css/[name].[hash].css' //放到dist/css/下 }) ]

  5. 支持图片

    yarn add file-loader url-loader -D file-loader 解决css等文件中引入图片路径的问题 url-loader 当图片较小的时候会把图片BASE64编码，大于limit参数的时候仍是使用file-loader 进行拷贝 { // file-loader是解析图片地址，把图片从源文件拷贝到目标文件而且修改源文件名字 // 能够处理任意二进制，bootstrap里的字体 // url-loader能够在文件比较小的时候，直接变成base64字符串内嵌到页面中 { test: /.(png|jpg|jpeg|gif|svg)/, use: { loader: 'url-loader', options: { outputPath: 'images/', // 图片输出的路径 limit: 5 * 1024 } } }, // 同时要处理打包图片路径问题， output: { publicPath: '/' }

  6. 处理css3属性前缀

    yarn add postcss-loader -D { test: /.css$/, // 转换文件的匹配正则 // css-loader用来处理css中url的路径 // style-loader能够把css文件变成style标签插入head中 // 多个loader是有顺序要求的，从右往左写，由于转换的时候是从右往左转换的 // 此插件先用css-loader处理一下css文件 use: ExtractTextWebpackPlugin.extract({ fallback: 'style-loader', //若是须要，能够在 sass-loader 以前将 resolve-url-loader 连接进来 use: ['css-loader', 'postcss-loader'] }) }, 创建.postcssrc.js文件 module.exports = { "plugins": { // to edit target browsers: use "browserslist" field in package.json "autoprefixer": { "browsers": [ "ie >= 9", "ff >= 30", "chrome >= 34", "safari >= 7", "opera >= 23" ] } } }

  7. 调试打包的代码 webapck经过配置能够自动给咱们source maps文件，map文件是一种对应编译文件和源文件的方法

devtool: 'eval-source-map'

1. source-map 把映射文件生成到单独的文件，最完整最慢
2. cheap-module-source-map 在一个单独的文件中产生一个不带列映射的Map
3. eval-source-map 使用eval打包源文件模块,在同一个文件中生成完整sourcemap
4. cheap-module-eval-source-map sourcemap和打包后的JS同行显示，没有映射列
复制代码

  1. 压缩js

    webpack --mode production 会压缩，能够忽略下面 yarn add uglifyjs-webpack-plugin -D const UglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin') new UglifyjsWebpackPlugin(),

  2. 压缩css

    webpack --mode production 会压缩，能够忽略下面 { test: /.css$/, // 转换文件的匹配正则 use: ExtractTextWebpackPlugin.extract({ fallback: 'style-loader', use: [ { loader: 'css-laoder', options: {minimize: true} }, 'postcss-loader' ] }) },

  3. 清空打包输出目录

    yarn add clean-webpack-plugin -D const CleanWebpackPlugin = require('clean-webpack-plugin') new CleanWebpackPlugin([path.join(__dirname, 'dist')]),

  4. 区分环境变量 许多 library 将经过与 process.env.NODE_ENV 环境变量关联，以决定 library 中应该引用哪些内容。咱们可使用 webpack 内置的 DefinePlugin 为全部的依赖定义这个变量：

    "scripts": { "build": "cross-env NODE_ENV=production webpack --mode development", // 设置NODE_ENV为production "dev": "webpack-dev-server --open --mode development " }, new webpack.DefinePlugin({ NODE_ENV:JSON.stringify(process.env.NODE_ENV) }) 在全局都有NODE_ENV这个变量,当yarn run build,时，NODE_ENV = 'production'

  5. 暴露全局变量

    new Webpack.ProvidePlugin({ '$': 'jquery' }),

  6. resolve解析

    xtension: 指定extension以后能够不用在require或是import的时候加文件扩展名,会依次尝试添加扩展名进行匹配 resolve: { //自动补全后缀，注意第一个必须是空字符串,后缀必定以点开头 extension: ['', '.js', '.json', '.css'] } alias: 配置别名能够加快webpack查找模块的速度 resolve: { alias: { 'bootstrap': 'bootstrap/dist/css/bootstrap.css' } }

Tree Shaking

  1. css Tree Shaking

    yarn add purify-css purifycss-webpack -D const glob = require('glob') const PurifyCSSPlugin = require('purifycss-webpack') // 去除无用的css plugins: [ new PurifyCSSPlugin({ // 路劲扫描 nodejs内置 路劲检查 paths: glob.sync(path.join(__dirname, 'pages//.html')) }) ]

  2. js优化

    yarn add webpack-parallel-uglify-plugin -D const WebpackParallelUglifyPlugin = require('webpack-parallel-uglify-plugin') plugins: [ new WebpackParallelUglifyPlugin({ uglifyJS: { output: { beautify: false, //不须要格式化 comments: false //不保留注释 }, compress: { warnings: false, // 在UglifyJs删除没有用到的代码时不输出警告 drop_console: true, // 删除全部的 console 语句，能够兼容ie浏览器 collapse_vars: true, // 内嵌定义了可是只用到一次的变量 reduce_vars: true // 提取出出现屡次可是没有定义成变量去引用的静态值 } } }) ]

提取公共代码

大网站有多个页面，每一个页面因为采用相同技术栈和样式代码，会包含不少公共代码 连接

// webpack4最新配置，能够搜索关键字查查配置项
  optimization: {
    splitChunks: {
      cacheGroups: {
        commons: {
          chunks: 'initial',
          minChunks: 2,
          maxInitialRequests: 5, // The default limit is too small to showcase the effect
          minSize: 0, // This is example is too small to create commons chunks
          name: 'common'
        }
      }
    }
  },
复制代码

打包第三方类库

  1. DllPlugin插件： 用于打包出一个个动态链接库

  2. DllReferencePlugin: 在配置文件中引入DllPlugin插件打包好的动态链接库

    在package.json中 "scripts": { "build": "webpack --mode development", "build:dll": "webpack --config webpack.dll.config.js --mode development", "dev": "webpack-dev-server --open --mode development" } 新建webpack.dll.config.js
    const path = require('path') const webpack = require('webpack')

    /**

    • 尽可能减少搜索范围
    • target: 'dll[name]' 指定导出变量名字 */

    module.exports = { entry: { vendor: ['jquery', 'lodash'] }, output: { path: path.join(__dirname, 'static'), filename: '[name].dll.js', library: 'dll[name]' // 全局变量名，其余模块会今后变量上获取里面模块 }, // manifest是描述文件 plugins: [ new webpack.DllPlugin({ name: 'dll[name]', path: path.join(__dirname, 'manifest.json') }) ] }

    在webpack.config.js中 plugins: [ new webpack.DllReferencePlugin({ manifest: path.join(__dirname, 'manifest.json') }) ] 执行npm run build:dll 就能够打包第三方包了

使用happypack

HappyPack就能让Webpack把任务分解给多个子进程去并发的执行，子进程处理完后再把结果发送给主进程。 happypack

npm i happypack@next -D
const HappyPack = require('happypack')
const os = require('os')
const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length })

  {
    test: /\.js$/,
    // loader: 'babel-loader',
    loader: 'happypack/loader?id=happy-babel-js', // 增长新的HappyPack构建loader
    include: [resolve('src')],
    exclude: /node_modules/,
  }
  
  plugins: [
    new HappyPack({
      id: 'happy-babel-js',
      loaders: ['babel-loader?cacheDirectory=true'],
      threadPool: happyThreadPool
    })
]
复制代码

显示打包时间

yarn add progress-bar-webpack-plugin -D
const ProgressBarPlugin = require('progress-bar-webpack-plugin')
plugins: [
    new ProgressBarPlugin({
      format: '  build [:bar] ' + chalk.green.bold(':percent') + ' (:elapsed seconds)'
    })
]
复制代码

多页配置

git完整代码连接

entry: { //entry是一个字符串或者数组都是单页，是对象则是多页，这里是index页和base页
    index: './pages/index/index.js',
    base: './pages/base/base.js'
  }
  
  一个页面对应一个html模板，在plugin中
  plugins: [
    new HtmlWebpackPlugin({
      template: './pages/index/index.html',
      filename: 'pages/index.html',
      hash: true,
      chunks: ['index', 'common'],
      minify: {
        removeAttributeQuotes: true
      }
    }),
    new HtmlWebpackPlugin({
      template: './pages/base/base.html',
      filename: 'pages/base.html',
      hash: true,
      chunks: ['base', 'common'],
      minify: {
        removeAttributeQuotes: true
      }
    }),
  ]
复制代码

完整多页配置代码以下 git完整代码连接

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CleanWebpackPlugin = require('clean-webpack-plugin')
const ExtractTextWebpackPlugin = require('extract-text-webpack-plugin')
const Webpack = require('webpack')
const glob = require('glob')
const PurifyCSSPlugin = require('purifycss-webpack')

// let cssExtract = new ExtractTextWebpackPlugin('static/css/[name].css')

module.exports = {
  entry: {
    index: './pages/index/index.js',
    base: './pages/base/base.js'
  },
  output: {
    path: path.join(__dirname, 'dist'),
    // name是entry的名字main，hash是根据打包后的文件内容计算出来的hash值
    filename: 'static/js/[name].[hash].js',
    publicPath: '/'
  },
  module: {
    rules: [
      {
        test: /\.css$/, 
        use: ExtractTextWebpackPlugin.extract({
          fallback: 'style-loader',
          use: ['css-loader', 'postcss-loader']
        })
      },
      {
        test: /\.js$/,
        use: {
          loader: 'babel-loader',
          query: {
            presets: ['env', 'stage-0', 'react'] 
          }
        }
      }
    ]
  },
  optimization: {
    splitChunks: {
      cacheGroups: {
        commons: {
          chunks: 'initial',
          minChunks: 2,
          maxInitialRequests: 5, // The default limit is too small to showcase the effect
          minSize: 0, // This is example is too small to create commons chunks
          name: 'common'
        }
      }
    }
  },
  plugins: [
    new CleanWebpackPlugin([path.join(__dirname, 'dist')]),
    new HtmlWebpackPlugin({
      template: './pages/index/index.html',
      filename: 'pages/index.html',
      hash: true,
      chunks: ['index', 'common'],
      minify: {
        removeAttributeQuotes: true
      }
    }),
    new HtmlWebpackPlugin({
      template: './pages/base/base.html',
      filename: 'pages/base.html',
      hash: true,
      chunks: ['base', 'common'],
      minify: {
        removeAttributeQuotes: true
      }
    }),
    new ExtractTextWebpackPlugin({
      filename: 'static/css/[name].[hash].css'
    }),
    new PurifyCSSPlugin({
      // 路劲扫描 nodejs内置 路劲检查
      paths: glob.sync(path.join(__dirname, 'pages/*/*.html'))
    })
  ],
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    port: 9090,
    host: 'localhost',
    overlay: true,
    compress: true // 服务器返回浏览器的时候是否启动gzip压缩
  }
}
复制代码

vue-cli几个重要路径

assetsRoot:构建输出目录 也就是构建后的东西都扔这里
assetsSubDirectory:资源子目录(static) 除了index.html，其他的js img css都分在这里
assetsPublicPath:项目目录 一个杠杠(/) 啥意思呢，是根目录的意思
复制代码

未完待续： 接下来我会基于vue-cli去重新搭建一个工程，单页，多页都会有哦！！！让你看懂vue-cli，而且可以自定义开发环境！！！

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程