webpack----常规配置

最新推荐文章于 2024-09-21 10:39:31 发布
最新推荐文章于 2024-09-21 10:39:31 发布
阅读量116 收藏
点赞数
文章标签： webpack javascript json ViewUI
原文链接：https://juejin.im/post/5ade8ed5f265da0b9265366e
版权

webpack，用起来利器，学起来懵*，还变的快~~~ 做笔记，加深记忆。


作用：

  • 代码转化
  • 文件压缩
  • 代码分割
  • 自动刷新
  • 代码校验

核心概念：

  • entry：入口
  • module：模块，webpack从entry开始，递归找出所有依赖的模块
  • chunk：代码块。
  • loader：模块转化配置。 将原内容按配置转化
  • plugin：扩展插件
  • output：输出结果
  1. webpack启动后，从entry里配置的module开始递归解析entry依赖的所有module，再根据配置的loader对module进行转换。
  2. 一个entry和其所依赖的module组成一个chunk代码块。

单页面SPA入口：

module.exports = {
  entry: './main.js'
}复制代码

多页面MPA入口：

entry: {
  home: "./home.js",
  about: "./about.js",
  contact: "./contact.js"
}复制代码

输出

  • path：输出位置。eg：path: path.join(__dirname, '../dist')
  • publicPath：针对打包后，静态文件的位置
  • filename：定义每个输出bundle的名称。

  1. filename: "bundle.js"
filename: "[name].bundle.js"
filename: "[id].bundle.js"
filename: "[name].[hash].bundle.js"
filename: "[chunkhash].bundle.js"
复制代码

module模块

处理不同模块，主要在rules中

module: {
  rules: [
    {
      test: /\.(vue|js|jsx)$/,                    //处理对象，一般用正则标识文件后缀
      loader: 'eslint-loader',                    //处理方案，不同的loader
      exclude: /node_modules/,                    //规则忽略文件
      enforce: "pre"                              //预处理
    },
    {
      test: /\.vue$/,
      loader: 'vue-loader',
      options: createVueLoaderOptions(isDev)      //option-loader的选项
    },
    ...
    {
      test: /\.css$/,
      use: [                                      //loader集合
        'style-loader',
        'css-loader'
      ]
    },
    {
      test: /\.(gif|jpg|jpeg|png|svg)$/,
      use: [{                                     //use是useEntry(loader和他的option)的集合
        loader: 'url-loader',
        options: {
          limit: 1024,
          name: 'resources/[path][name].[hash:8].[ext]'
        }
      }]
    },
  ]
}复制代码

resolve

引入模块时，可以不用扩展名

alias: //用的多的就是

  resolve: {
        //引入模块的时候，可以不用扩展名 
        extensions: [".js", ".less", ".json"],
        alias: {         //别名
            "@": "./src/"
        }
    },复制代码

----------------------------------------------------------------------------------------


这货的知识太杂了，记一个实际项目搭建中的用到的。

webpack.config.base.js //放置完全公共的东西

const path = require('path')
const createVueLoaderOptions = require('./vue-loader.config')

const isDev = process.env.NODE_ENV === 'development'

const config = {
  //mode: process.env.NODE_ENV || 'production',
  target: "web",
  entry: path.join(__dirname, '../client/index.js'),
  output: {
    filename: 'bundle.[hash:8].js',
    path: path.join(__dirname, '../dist'),
    publicPath: "http://127.0.0.1:8000/public/"
  },
  module: {
    rules: [
      {
        test: /\.(vue|js|jsx)$/,
        loader: 'eslint-loader',      //代码格式检测
        exclude: /node_modules/,      //exclude不用打包
        enforce: "pre"                //加入，预处理，不会和真正的预处理文件冲突
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: createVueLoaderOptions(isDev)     //使用vue-loader，配置单独打包css文件
      },
      {
        test: /\.jsx$/,
        loader: 'babel-loader'
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/         //exclude不用打包
      },
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      },
      {
        test: /\.(gif|jpg|jpeg|png|svg)$/,
        use: [{
          loader: 'url-loader',
          options: {
            limit: 1024,
            name: 'resources/[path][name].[hash:8].[ext]' 
            //静态文件归并位置,[name][path]配置过程中,都可以取到 [hash:8] hash值取8位        
          }
        }]
      },
    ]
  }
}

module.exports = config
复制代码

webpack.config.client.js 

const path = require('path')
const HTMLPlugin = require('html-webpack-plugin')
const webpack = require('webpack')
const merge = require('webpack-merge')                         //Merge合并参数
const ExtractPlugin = require('extract-text-webpack-plugin')   //把css单独打包到一个文件中
const baseConfig = require('./webpack.config.base')
const VueClientPlugin = require('vue-server-renderer/client-plugin')

const isDev = process.env.NODE_ENV === 'development'

const defaultPlugins = [
  new webpack.DefinePlugin({
    'process.env': {
      NODE_ENV: isDev ? '"development"' : '"production"'
    }
  }),
  new HTMLPlugin({
    template: path.join(__dirname, 'template.html')
  }),
  new VueClientPlugin()
]

const devServer = {
  port: '8000',
  host: '0.0.0.0',
  overlay: {
    errors: true,
  },
  hot: true,
  headers: {'Access-Control-Allow-Origin': '*'},
  historyApiFallback: {
    index: '/public/index.html'
  }
  //open: true
}

let config

if (isDev) {
  config = merge(baseConfig, {
    devtool: '#cheap-module-eval-source-map',
    module: {
      rules: [
        {
          test: /\.styl/,
          use: [
            'vue-style-loader',          //vue开发的时候，热更替功能，使用vue-style-loader
            'css-loader',
            {
              loader: 'postcss-loader',
              options: {
                sourceMap: true
              }
            },
            'stylus-loader'
          ]
        }
      ]
    },
    devServer,
    plugins: defaultPlugins.concat([
      new webpack.HotModuleReplacementPlugin(),
      new webpack.NoEmitOnErrorsPlugin()
    ])
  })
} else {
  config = merge(baseConfig, {
    entry: {                                 //盖掉base.config.js中的配置
      app: path.join(__dirname, '../client/index.js'),
      vendor: ['vue']
    },
    output: {
      filename: '[name].[chunkhash:8].js'    //
    },
    module: {
      rules: [
        {
          test: /\.styl/,
          use: ExtractPlugin.extract({   //vue开发的时候,用热更替的功能，使用vue-style-loader
            fallback: 'style-loader',
            use: [
              'css-loader',
              {
                loader: 'postcss-loader',
                options: {
                  sourceMap: true
                }
              },
              'stylus-loader'
            ]
          })
        }
      ]
    },
    /*optimization: {
      splitChunks: {
        chunks: 'all'
      },
      runtimeChunk: true
    },*/
    plugins: defaultPlugins.concat([
      new ExtractPlugin('style.[contentHash:8].css'), //ExtractPlugin把css单独打包到一个css文件里面
      new webpack.optimize.CommonsChunkPlugin({
        name: 'vendor'
      }),
      new webpack.optimize.CommonsChunkPlugin({
        name: 'runtime'
      })
    ]),
  })
}
module.exports = config
复制代码


  • css-loader 将CSS变成JS //
  • style-loader将JS样式插入head //js样式由css-loader生成,
  • extractTextPlugin // 将CSS从JS中提取出来
  • css module //解决css命名冲突的问题
  • less-loader sass-loader
  • postcss-loader //PostCSS处理，做解析

html-webpack-plugin                生成html页面文件， 一般多页面时候用

extractTextPlugin      抽取文本，

uglifyjsplugin                             合并压缩

commonsChunkPlugin               抽取公用模块  ，多页面时候用的多

clean-webpack-plugin                清除文件  打包文件之前

copy-webpack-plugin                 文件复制



postcss:[
    require('autoprefixer'){
        browsers:['late 5 versions']
    }
]
复制代码



webpack常用的loader

样式：style-loader、css-loader、less-loader、sass-loader等

文件：raw-loader、file-loader 、url-loader等

编译：babel-loader、coffee-loader 、ts-loader等

校验测试：mocha-loader、jshint-loader 、eslint-loader等


---------------------------------------------------------------------------

最后

parcel，了解一下。

小而美，费不着的时候，就别折腾web胖了。


lyuharvey
关注
Webpack中常规配置项
lc_web的博客
06-07 1666
1、webpack.config.js 配置文件 当我们安装好webpack之后，就可以使用webpack命令了，比如要将一个main.js文件打包成一个bundle.js文件，可以使用如下命令： webpack main.js bundle.js 一般在实际的项目开发中，要把这些命令写到一个webpack.config.js的文件中。上面打包操作可以做如下配置： module.exports = { entry: './main.js', output: { filename: 'bundle.
webpack4配置区分webpack --watch与webpack-dev-server
qq_21816073的博客
08-13 790
最近，利用webpack搭建一个简单的集成html，scss与js的脚手架，方便时常做一些简单的开发。 项目结构如下： --dist --src --scss index.html index.js package.json webpack.config.js 前提至少需要配置css规则和js规则，需要用到style-loader,css-loader以及scss-loader,同时需要安...
webpack常规开发配置
Marx的学习空间
10-11 430
webpack是现在非常流行的前端构建工具，下面介绍下webpack常规的配置
webpack配置（超全loader和插件）
weixin_42574100的博客
04-13 1926
webpack webpack中的loader webpack 插件
webpack基础配置
m0_61852712的博客
10-11 457
webpack基础配置
webpack基本配置
light的博客~~~
06-30 5341
webpack基本配置
前端开源库-jsdoc-webpack-plugin
08-30
4. 运行Webpack：执行`npx webpack`或`npm run build`，Webpack在完成常规构建后会自动运行JSDoc并生成文档。 通过以上步骤，开发者就可以享受到jsdoc-webpack-plugin带来的便利，让文档生成与项目构建无缝结合。这...
分享webpack插件generate-asset-webpack-plugin，vue打包自动生成额外文件
wozhenhaokan的博客
04-22 2635
我们在vue项目实际开发的过程中会有很多公共的配置，比如一些第三方服务的接口、图片服务器地址、cdn地址等等，一般情况下不同的环境会有不同的配置信息。 常规的方法是在pubilc目录下新增config.js，然后在index.html中引入，这样也方便打包部署后，运维根据需求直接修改config.js中的某些地址，而不用重复打包部署。 就像这样： config.js index.html 我在近期的项目中新增了一些额外的文件（比如xxx.h...
react-router-mobx-antd-webpack-gulp：基于React，React路由器，Mobx，Antd构建的管理后台演示
02-04
基于React建造的管理后台系统 技术框架 ES6 / 7 Vanilla JS ESLint（代码规范） ...├── config # webpack 配置目录 ├── res # 静态文件目录 └── src # 前端源码目录 ├── index.html # lay
webpack入门和实战(一)--webpack配置及技巧
PYPMY的博客
07-06 348
一、全面理解webpack 1、什么是 webpack？ webpack是近期最火的一款模块加载器兼打包工具，它能把各种资源，例如JS（含JSX）、coffee、样式（含less/sass）、图片等都作为模块来使用和处理,它能有Grunt或Gulp所有基本功能。webpack的官网是 https://webpack.github.io/ ，文档地址是https://webpack.github.io/docs，官网对webpack的定义是MODULE BUNDLER，他的目的就是把有依赖关...
Webpack入门
越努力，越幸运！
04-05 1万+
Webpack 是什么webpack是一款模块加载器兼打包工具，它能把各种资源，例如JS（含JSX）、coffee、样式（含less/sass）、图片等都作为模块来使用和处理。 简单说就是模块加载器，通过使用Webpack，能够像Node.js一样处理依赖关系，然后解析出模块之间的依赖，将代码打包。 其主要特性如下： 同时支持CommonJS和AMD模块（对于新项目，推荐直接使用CommonJS
webpack之常用loader安装及配置方式和常见问题
麻瓜哇哇哇的博客
03-20 1078
babel-loader 用来处理ES6＋并将其编译成ES5，它使我们能够在工程中使用最新的语言特性（甚至在提案中），同时不必特别关注这些特性在不同平台的兼容问题。 安装方式: npm i babel-loader @babel/core @babel/preset-env -D babel-loader：它是使Babel与webpack协同工作的模块 @babel/core: 很明显，它是B...
webpack的常用配置
fwk19840301的博客
02-07 3563
webpack 中文文档 webpack.dev /* 1.该文件是webpack的配置文件，所有webpack的任务、用到的loader、plugins都要配置在这里 2.该文件要符合CJS模块化规范 */ //引入Node中一个内置的path模块，专门用于解决路径问题 const {resolve} = require('path'); //引入html-webpack-plugin，用于加工html文件 const HtmlWebpackPlugin = require('html-w.
前端小白入门webpack中对于css、less、图片的处理
weixin_43916611的博客
12-25 770
文章目录前言一、配置步骤1.我们先在src下创建一个css文件夹，再css文件夹下在创建样式文件。总结今日推荐 前言 本篇我们一起来进行在webpack中如何处理css，用模块化的方式来添加样式，使用webpack最重要的核心思想就是：一切皆模块 一、配置步骤 1.我们先在src下创建一个css文件夹，再css文件夹下在创建样式文件。 1.那么又出现一个问题，页面如何于css文件链接起来呢？ 这个时候我们就需要导入，css文件应该是默认导出的 我们到main.js中导入 require("./css/n
ESLint错误解析
小僵尸打字员的博客
01-12 1万+
“no-alert”: 0,//禁止使用alert confirm prompt “no-array-constructor”: 2,//禁止使用数组构造器 “no-bitwise”: 0,//禁止使用按位运算符 “no-caller”: 1,//禁止使用arguments.caller或arguments.callee “no-catch-shadow”: 2,//禁止catch子句参数
【Vue项目总结】webpack常规打包优化方案
sinat_35993535的博客
05-04 700
由于新建项目发版打包时间大概需要30分钟，发版时严重拖慢下班时间，所以特意查看了相关文档来优化打包速度，争取早点下班，_。 分析打包文件 要优化，先分析。我们先要知道到底是哪里拖慢我们的打包速度呢？ 打包后生成文件分析 可以利用webpack-bundle-analyzer插件来分析我们打包后生成的文件 安装 npm i webpack-bundle-analyzer -D 使用 修改w...
webpack超详细配置, 使用教程(图文)
热门推荐
翾的博客
05-06 10万+
博主在这里就不详细介绍webpack来源以及作用了, 本篇博文面向新手主要说明如何配置webpack, 以及webpack的使用方法, 直到创建出一个合理的属于自己webpack项目.流程webpack安装 Step 1: 首先安装Node.js, 可以去Node.js官网下载. Step2: 在Git或者cmd中输入下面这段代码, 通过全局先将webpack指令安装进电脑中npm install
【webpack4系列】webpack基础用法（二）
mengran_code的博客
09-15 1512
我们需要注意的是，polyfill的体积是很大的，如果我们不做特殊说明，它会把你目标浏览器中缺失的所有的es6的新的功能都做垫片处理。但是我们没有用到的那部分功能的转换其实是无意义的，造成打包后的体积无谓的增大，所以通常，我们会在presets的选项里，配置"useBuiltIns": “usage”,这样一方面只对使用的新功能做垫片，另一方面，也不需要我们单独引入import '@babel/polyfill’了，它会在使用的地方自动注入。经过 Webpack 的处理，最终会输出浏览器能使用的静态资源。
前端性能优化
最新发布
qq_29579625的博客
09-21 938
前端性能优化是一个系统性工作，它涉及代码开发、打包、上线部署等多个阶段。下面从这三个阶段分别进行详细讲解及示例说明。
webpack和webpack-cli
10-11
通常，我们在项目中使用npm或yarn安装webpack和webpack-cli，然后在webpack.config.js文件中配置打包规则和插件。 除了常规的JavaScript模块打包外，webpack还支持加载和打包各种资源文件，如CSS、图片、字体等。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值