webpack----常规配置

最新推荐文章于 2024-09-15 21:06:29 发布
最新推荐文章于 2024-09-15 21:06:29 发布
阅读量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
关注
前端开源库-jsdoc-webpack-plugin
08-30
4. 运行Webpack：执行`npx webpack`或`npm run build`，Webpack在完成常规构建后会自动运行JSDoc并生成文档。 通过以上步骤，开发者就可以享受到jsdoc-webpack-plugin带来的便利，让文档生成与项目构建无缝结合。这...
webpack配置（超全loader和插件）
weixin_42574100的博客
04-13 1924
webpack webpack中的loader webpack 插件
webpack基础配置
m0_61852712的博客
10-11 456
webpack基础配置
webpack基本配置
light的博客~~~
06-30 5322
webpack基本配置
webpack常规开发配置
Marx的学习空间
10-11 430
webpack是现在非常流行的前端构建工具，下面介绍下webpack常规的配置
Webpack中常规配置项
lc_web的博客
06-07 1665
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.
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
spsave-webpack-plugin:这是一个Webpack插件，可让您将生成的资产上传到SharePoint网站
05-22
对于早于4.x版本的webpack，显式使用1.x版本： $ npm install spsave-webpack-plugin@~1.0.8 --save-dev 对于webpack 4.x和更高版本，请使用常规安装： $ npm install spsave-webpack-plugin --save-dev基本用法该...
向Webpack添加原生WebWorker捆绑支持
08-07
接下来，在你的Webpack配置文件（通常是`webpack.config.js`）中引入并配置这个插件。在`plugins`数组中添加`WorkerPlugin`： ```javascript const WorkerPlugin = require('worker-plugin'); module.exports = { ...
starter-webpack-angularjs:由Webpack（3.x）支持的具有AngularJS（1.x），Bootstrap（4.x）和Font Awesome（4.x）的项目的启动器
04-30
用于开发，生产和测试的Webpack配置。 Babel支持ES6和ES7。 添加带注释（/ * @ngInject * /）的AngularJS DI。 所有版本中均包含源地图。 具有Autoprefixer和SASS的样式表（不是必需的，它也支持常规CSS）。 ...
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入门
越努力，越幸运！
04-05 1万+
Webpack 是什么webpack是一款模块加载器兼打包工具，它能把各种资源，例如JS（含JSX）、coffee、样式（含less/sass）、图片等都作为模块来使用和处理。 简单说就是模块加载器，通过使用Webpack，能够像Node.js一样处理依赖关系，然后解析出模块之间的依赖，将代码打包。 其主要特性如下： 同时支持CommonJS和AMD模块（对于新项目，推荐直接使用CommonJS
【Vue项目总结】webpack常规打包优化方案
sinat_35993535的博客
05-04 699
由于新建项目发版打包时间大概需要30分钟，发版时严重拖慢下班时间，所以特意查看了相关文档来优化打包速度，争取早点下班，_。 分析打包文件 要优化，先分析。我们先要知道到底是哪里拖慢我们的打包速度呢？ 打包后生成文件分析 可以利用webpack-bundle-analyzer插件来分析我们打包后生成的文件 安装 npm i webpack-bundle-analyzer -D 使用 修改w...
前端小白入门webpack中对于css、less、图片的处理
weixin_43916611的博客
12-25 769
文章目录前言一、配置步骤1.我们先在src下创建一个css文件夹，再css文件夹下在创建样式文件。总结今日推荐 前言 本篇我们一起来进行在webpack中如何处理css，用模块化的方式来添加样式，使用webpack最重要的核心思想就是：一切皆模块 一、配置步骤 1.我们先在src下创建一个css文件夹，再css文件夹下在创建样式文件。 1.那么又出现一个问题，页面如何于css文件链接起来呢？ 这个时候我们就需要导入，css文件应该是默认导出的 我们到main.js中导入 require("./css/n
webpack超详细配置, 使用教程(图文)
热门推荐
翾的博客
05-06 10万+
博主在这里就不详细介绍webpack来源以及作用了, 本篇博文面向新手主要说明如何配置webpack, 以及webpack的使用方法, 直到创建出一个合理的属于自己webpack项目.流程webpack安装 Step 1: 首先安装Node.js, 可以去Node.js官网下载. Step2: 在Git或者cmd中输入下面这段代码, 通过全局先将webpack指令安装进电脑中npm install
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子句参数
webpack之常用loader安装及配置方式和常见问题
麻瓜哇哇哇的博客
03-20 1077
babel-loader 用来处理ES6＋并将其编译成ES5，它使我们能够在工程中使用最新的语言特性（甚至在提案中），同时不必特别关注这些特性在不同平台的兼容问题。 安装方式: npm i babel-loader @babel/core @babel/preset-env -D babel-loader：它是使Babel与webpack协同工作的模块 @babel/core: 很明显，它是B...
【webpack4系列】webpack基础用法（二）
最新发布
mengran_code的博客
09-15 1297
我们需要注意的是，polyfill的体积是很大的，如果我们不做特殊说明，它会把你目标浏览器中缺失的所有的es6的新的功能都做垫片处理。但是我们没有用到的那部分功能的转换其实是无意义的，造成打包后的体积无谓的增大，所以通常，我们会在presets的选项里，配置"useBuiltIns": “usage”,这样一方面只对使用的新功能做垫片，另一方面，也不需要我们单独引入import '@babel/polyfill’了，它会在使用的地方自动注入。经过 Webpack 的处理，最终会输出浏览器能使用的静态资源。
Webpack和Vite的区别
qq_45464944的博客
09-12 1413
什么是Webpack？什么是Vite？webpack和Vite的区别是什么？
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、付费专栏及课程。

余额充值