webpack02 --常用配置

最新推荐文章于 2023-04-11 11:30:02 发布
最新推荐文章于 2023-04-11 11:30:02 发布
阅读量138 收藏
点赞数
分类专栏： webpack 文章标签： webpack 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wendyGao_Yin/article/details/109490252
版权

使用webpack的步骤

webpack安装的插件或者loader使用的时候加载的方式是自右向左，自下而上的顺序加载。

  • 初始化一个项目 npm init -y (也可以使用 npm init 回车 自主配置)
npm i  webpack webpack-cli  --save-dev
// --save 就是说要把当前安装的包的信息存放到package.json中; 
//-dev 相当于告诉webpack 这个包是开发所需要的依赖
npm i  webpack webpack-cli  -D
npm i  webpack webpack-cli --dev // 不能保证当前这个包一定会体现在package.json中

npm i jquery --save 就是说要把当前安装的包的信息存放到package.json中 默认是生产依赖
npm i jquery -S  // -S == --save
npm i jquery //默认是安装到生产环境
  • loader：主要用来处理文件的， 将不是js的文件编译成JS可识别的文件
  • plugins：

清空文件

clean-webpack-plugin:每次构建前清理 /dist 文件夹

安装 cnpm install clean-webpack-plugin -D

安装成功后的package.json

"devDependencies": {
    "clean-webpack-plugin": "^3.0.0",
  }

webpack.config.js

const path = require("path");
const { CleanWebpackPlugin } = require("clean-webpack-plugin"); // 引入清空文件插件
module.exports={
	entry:"./src/index.js",
	output:{
		path:path.resolve(__dirname,"dist"),
		filename:"bundle.js"
	},
	plugins:[ //插件
		new CleanWebpackPlugin({
			//cleanOnceBeforeBuildPatterns: ['**/*', '!static-files*'],
			//'**/*':匹配的文件
			//'!static-files*'：不清除的文件
		}),//每次清空dist中的老文件
	]
}

生成html，自动添加资源文件

HtmlWebpackPlugin:该插件将为你生成一个 HTML5 文件， 其中包括使用 script 标签的 body 中的所有 webpack 包。

安装 cnpm install -D html-webpack-plugin / yarn add --dev html-webpack-plugin

安装成功后的package.json

"devDependencies": {
   "html-webpack-plugin": "^4.5.0",
  }

webpack.config.js

const path = require("path");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");// 引入清空文件插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports={
	entry:"./src/index.js",
	output:{
		path:path.resolve(__dirname,"dist"),//
		filename:"bundle.js"
	},
	plugins:[
	new CleanWebpackPlugin(),//每次清空dist中的老文件
	new HtmlWebpackPlugin({
		title:"My App", //用于生成的HTML文档的标题
		filename:"dist/admin.html", //写入HTML的文件。默认为index.html。可以指定一个子目录
		template:"public/index.html ", //指定webpack模板的相对或绝对路径。默认使用src/index.ejs
		hash:, //如果是true,则将唯一的webpack编译哈希值附加到所有包含的脚本和CSS文件中。这对于清除缓存很有用
		chunks:, //仅允许您添加一些块（例如，仅单元测试块）
		minify:true ,//控制是否以及以何种方式最小化输出。默认false
	}),//简化HTML文件的创建,自动引入js文件
	]
}

修改title，需要结合HTML的title属性。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <title><%= htmlWebpackPlugin.options.title %></title>   <!--ejs语法 --> 
  </head>
  <body>
  </body>
</html>
  • 每次修改配置文件都需要重新run一下配置服务。

多模块配置项（多入口多出口配置）
webpack.config.js

const path = require("path");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");// 引入清空文件插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports={
	entry:{
	index:"./src/index.js",
	other:"./src/other.js",
	common:"./src/common.js",
	},
	output:{
		path:path.resolve(__dirname,"dist"),
		filename:"[name].[hash:5].js",//不限制个数默认是20位
	},
	plugins:[
	new CleanWebpackPlugin(),//每次清空dist中的老文件
	// ...html(),
	new HtmlWebpackPlugin({
		filename:"assets/index.html", 
		template:"public/index.html ", 
		chunks:["index","common"],		
	}),
	new HtmlWebpackPlugin({
		filename:"assets/other.html", 
		template:"public/other.html ", 
		chunks:["other","common"],
	}),
	]
}
/*把HTML编译提出来 
function html(){
	var ary = ["index","other"];
	var arr = [];
	ary.forEach(item+>{
		arr.push(
			new HtmlWebpackPlugin({
				filename:`assets/${item}.html`, 
				template:`public/${item}.html`, 
				chunks:[item,"common"],
			})
		)
	return arr;
})
}
*/

webpack 服务

webpack-dev-server 将webpack与提供实时重载的开发服务器一起使用。这应该仅用于开发。

安装 npm install webpack-dev-server --save-dev
虽然可以全局安装和运行webpack-dev-server，但建议在本地安装。webpack-dev-server将始终在全局安装中使用本地安装。

1.使用CLI

使用它的最简单方法是使用CLI。在您所在的目录中 webpack.config.js，运行：
node_modules / .bin / webpack-dev-server
在终端运行以下命令 npm run webpack-dev-server

2.使用NPM脚本

NPM package.json

"scripts": {
  "start:dev": "webpack-dev-server"
}

在终端运行以下命令：npm run start:dev ;
NPM将自动为您引用node_modules二进制文件，并执行文件或命令。
此处安装使用时出了几次问题，最后采用了webpack，webpack-cli降级处理正常了

配置 webpack.config.js

两种方式都可以配置 webpack.config.js

var path = require('path');
module.exports = {
  //...
  output: {
    filename: 'bundle.js',//output.filename设置为'bundle.js'
  },
  devServer: {
   headers: {'X-Custom-Foo': 'bar'},//将标头添加到所有响应：
    contentBase: path.join(__dirname, 'dist'), //静态资源路径
    compress: true,//是否压缩
    port: 9000, //端口号
    open:true,//服务启动之后自动打开页面
    lazy: true,//惰性模式
    filename: 'bundle.js',//仅在需要时编译捆绑软件/bundle.js。 
    //filename在不使用惰性模式的情况下不起作用。
    host: '0.0.0.0',//指定要使用的主机,使服务器可从外部访问
    hot: true, //启用webpack的热模块更换功能
  }
};

启动服务器后，已解析模块列表之前将出现一条消息：

http://localhost:9000/
webpack output is served from /build/
Content not from webpack is served from /path/to/dist/

webpack常见报错处理方式:

  • 语法问题
  • 版本问题（版本不支持）
  • 丢包，cnpm和yarn混用经常会导致丢包问题，重新安装，不要混用包管理器
  • 提示没有权限时，删除编译好的dist文件重新编译。在这里插入图片描述

CSS配置

从 JavaScript 模块中 import 一个CSS文件，需要，让js识别它，添加到页面中，或者单独提出来称为一个css文件，引入到页面中。

编译css

css-loader ：把css编译成js可识别的语法
style-loader：把处理成JS的css，通过style标签插入到页面，真实项目一般不会使用style插入css

安装：npm install --save-dev css-loader style-loader
webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
};

提取CSS

mini-css-extract-plugin：将CSS提取到单独的文件中。它为每个包含CSS的JS文件创建一个CSS文件。
建议mini-css-extract-plugin与css-loader结合使用

与extract-text-webpack-plugin相比：

  • 异步加载
  • 没有重复的编译（性能）
  • 更容易使用
  • 特定于CSS

安装：npm install --save-dev mini-css-extract-plugin

style.css

body {
  background: green;
}

index.js

import './style.css';

webpack.config.js

const MiniCssExtractPlugin = require('mini-css-extract-plugin'); 
module.exports = {
  plugins: [new MiniCssExtractPlugin({
	filename:"css/[name].css",//此选项确定每个输出CSS文件的名称
	})],
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, 'css-loader'],
      },
    ],
  },
};

处理css前缀

postcss-loader: 处理css前缀，需要安装postcss-loader和postcss

安装：npm install --save-dev postcss-loader postcss

file.js

import css from "file.css";

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          "style-loader",
          "css-loader",
         "postcss-loader",//适配css方法一：结合postcss.config.js使用
         /*
         //适配css方法二:
		{
           loader: "postcss-loader",
           options: {
             postcssOptions: {
               plugins: [
                 ["autoprefixer"],
               ],
             },
           },
         },
		*/
        ],
      },
    ],
  },
};

PostCSS预设环境：

需要安装postcss-preset-env：npm install --save-dev postcss-preset-env
postcss-preset-env包括autoprefixer

postcss.config.js（postcss的适配文件）

module.exports = {
  plugins: [
    ["postcss-preset-env"],
  ],
};

.browserslistrc（告诉webpack，适配99%的浏览器）

cover 99.9%

postcss 的配置步骤

可以处理css的兼容写法，转义rem，处理less，sass文件

  1. 安装postcss 和 postcss-loader
  2. 在处理对应的css文件之前 先加上 postcss-loader
  3. 配置postcss所需要的配置项 postcss.config.js (需要安装postcss-preset-env)
  4. 设置浏览器的兼容版本 .browserslistrc 文件

编译less文件

用于webpack的Less loader。将less 编译为CSS。
需要安装less和less-loader

安装：npm install less less-loader --save-dev

webpack.config.js

let MiniCss = require('mini-css-extract-plugin')
module.exports = {
plugins: [
    new CleanWebpackPlugin(),
    new MiniCss({
      filename: 'css/[name].css'
    })
  ],
  module: {
    rules: [
      {
        test: /\.less$/,
        loader: [  MiniCss.loader,'css-loader','less-loader', 'postcss-loader'] 
      },
    ],
  },
};
/*
MiniCss.loader,	4.把css提取出来插入的到页面中
'css-loader',	3.吧css-loader编译成JS可识别的语法
'less-loader', 	2.编译less成css
'postcss-loader'1 添加前缀
*/

压缩css

方法一：optimize-css-assets-webpack-plugin

optimize-css-assets-webpack-plugin ：优化\最小化CSS。

安装：npm install --save-dev optimize-css-assets-webpack-plugin

webpack.config.js

var OptimizeCss = require('optimize-css-assets-webpack-plugin');
module.export = {
optimization:{
minimizer: [
	new OptimizeCss (),//当压缩css之后，JS就不会自动压缩了
]
}
}

方法二：css-minimizer-webpack-plugin

优化和缩小CSS。就像optimize-css-assets-webpack-plugin一样，但是使用查询字符串对源映射和资产更准确时，它可以缓存并在并行模式下工作。

安装 npm install css-minimizer-webpack-plugin --save-dev

webpack.config.css

const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');

module.exports = {
  module: {
	  plugins: [
	    new MiniCss({
	      filename: 'css/[name].css'
	    })
	  ],
    loaders: [
      {
        test: /.s?css$/,
        use: [MiniCss.loader, 'css-loader', 'sass-loader'],
      },
    ],
  },
  optimization: {
    minimize: true,
    minimizer: [
    	new CssMinimizerPlugin(),//当压缩css之后，JS就不会自动压缩了
    ],
  },
};

配置JS

处理JS

webpack 处理 JS 需要借助 babel ：使用Babel和webpack转换JavaScript文件。
需要安装的插件：babel-loader @babel/core @babel/preset-env
babel的预设 presets 就是插件的集合
babel的插件 plugins 你要使用的预设中没有包含的插件

安装：npm install -D babel-loader @babel/core @babel/preset-env webpack

module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: [['@babel/preset-env']   ],          
          plugins:  [ //两个插件顺序不能错
          	["@babel/plugin-proposal-decorators", { "legacy": true }],
          	//编译ES高级语法 需要安装：类的装饰器
          	//安装：npm install --save-dev @babel/plugin-proposal-decorators
    		["@babel/plugin-proposal-class-properties", { "loose" : true }],
    		//编译ES高级语法 需要安装：箭头函数，类等语法
          	//npm install --save-dev @babel/plugin-proposal-class-properties
    	],
        }
      }
    }
  ]
}

压缩JS

使用terser来缩小JavaScript。如果可能会因为版本问题报错建，可以降到@4.0.0

安装 npm install terser-webpack-plugin --save-dev

webpack.config.js

const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  optimization: {
    minimize: true,
    minimizer: [
	    new CssMinimizerPlugin(),//当压缩css之后，JS就不会自动压缩了
	    new TerserPlugin()    
    ],
  },
};

安装 npm install terser-webpack-plugin --save-dev

加载图片

url-loader 功能类似于 file-loader，但是在文件大小（单位 byte）低于指定的限制时，可以返回一个 DataURL。url-loader内置调用file-loader
file-loader: 将文件上的/file-loader解析为url，然后将文件发送到输出目录。import require()

安装 cnpm install -D file-loader url-loader

index.js

import img from '../public/1.jpg';

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif|ico)$/i,
        use: [         
          {
            loader: 'url-loader',
            options: {
	            name: '[path][name].[ext]',
	            limit: 10*1024, //Byte limit to inline files as Data URL
            },
          },
        ],
      },
    ],
  },
};
wendyGao_Yin
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
react问答功能小例子
01-26
react的一个小例子，实现了添加问题以及描述、对问题进行赞或踩、能对问题进行答复，排序等功能（问题跳转用到了路由）。用webpack搭的环境，用到了less和immutable。 一。用npm install 可以下载安装package.json中的模块。运行时如果一直在map to regist,可以尝试换镜像。 二。npm run server 可以开户站点。
react简答题
qq_42420970的博客
06-19 235
1.简单描述一下箭头函数中的this指向，以及与普通函数中this的区别 答案： 箭头函数中的this 1.箭头函数没有自己的this, 它的this是继承而来; 默认指向在定义它时所处的对象(宿主对象),而不是执行时的对象, 定义它的时候,可能环境是window; 箭头函数可以方便地让我们在 setTimeout ,setInterval中方便的使用this 2.箭头函数中，this指向的固定化，并不是因为箭头函数内部有绑定this的机制，实际原因是箭头函数根本没有自己的this，导致内部
关于React面试题及答案汇总
热门推荐
liuyingv8的博客
04-12 1万+
1、redux中间件中间件提供第三方插件的模式，自定义拦截action -&gt; reducer 的过程。变为 action -&gt; middlewares -&gt; reducer。这种机制可以让我们改变数据流，实现如异步 action ，action 过滤，日志输出，异常报告等功能。常见的中间件：redux-logger：提供日志输出redux-thunk：处理异步操作redux-pr...
webpack2的配置
假面猫的博客
06-19 651
什么是webpack？按我现在的理解，webpack是一个静态资源打包工具。把js，css，less，scss，图片等资源压缩合并，然后打包成上线版本。如何在自己项目中使用webpack2？1， 安装webpacknpm install webpack -S2，配置webpack.config.js文件 先来个简单的配置：// webpack和Node一样，都是遵循common.js 所以这里是r
webpack5配置之vue3
最新发布
12-14
基于webpack5构建的vue3项目，可用来学习webpack5的常用配置，和常见优化。https://webpack.docschina.org/plugins/image-minimizer-webpack-plugin/#root。 基于webpack5构建的vue3项目，可用来学习webpack5的常用...
webpack配置文件和常用配置项介绍
08-30
本篇文章主要介绍了webpack配置文件和常用配置项的相关知识。具有很好的参考价值。下面跟着小编一起来看下吧
webpack-SPA-boilerplate:单页应用程序的webpack配置
05-08
配置包括npm集成，webpack-dev-server的安装以及一些常用的加载程序和插件。 感谢。 完整功能清单 npm集成（在package.json中） "scripts": { "start": "webpack-dev-server --open --config webpack.dev.js", ...
webpack常用配置总览(小结)
10-15
主要介绍了webpack常用配置总览(小结)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
React+React-router+webpack 一个微信答题SPA小应用
致力于成为web大大滴前端
09-07 456
应用介绍： 总共三个页面，起始提示页，答题页，以及分数页； 说明： 用路由链接3个页面，提示页到答题页直接使用Link跳转，答题页跳转到分数页需要携带分数及答对的题目数，因此使用： hashHistory.push({ pathname: ‘/Score’,query:{score:score,number:number}}); 将参数放到URL后面，到了分数页再获取渲染： let
webpack2 配置 示例
weixin_33724570的博客
04-20 75
// https://github.com/webpack-contrib/extract-text-webpack-plugin var webpack = require("webpack"); var path = require('path'); var fs = require('fs'); var argv = require('yargs').argv; // npm instal...
React入门之React问答小项目
jeffery5461的博客
06-19 697
自学前端React框架10来天，撸了个React问答小项目，并加上了些自己的想法，有兴趣的的初学者可以看下，大家相互学习~下面附上效果图：
webpack2配置心路历程
neoveee的博客
06-20 1061
最近在研究webpack2的配置，发现遇到了很多的问题，而且一绊就是好久。其实webpack2的配置，官方文档讲的还是很清楚明白的，很多的配置也清晰灵活了好多，应该是自己对webpack还不是太熟悉，一直停留使用封装好的框架上，对内部的一些配置不明就里。这里将自己在配置过程中出现的各种问题记录下，防止踩坑1. webpack-dev-server不能处理import其实这个问题真的是困扰了好久，在控
React基础面试题
qq_1015350043的博客
04-13 358
1、React是什么 React是一个为数据提供渲染为HTML视图的开源JavaScript库。拥有虚拟DOM、组件化设计模式、声明式代码、单向数据流、使用JSX描述UI信息等特点。 2、 Real DOM和Virtual DOM React不直接操作DOM，而是实现了Virtual DOM，组件DOM结构映射到这个虚拟DOM上。React在虚拟DOM上实现了diff算法，当要重新渲染组件的时候，...
react实现设置答题器选项个数
weixin_30666753的博客
09-04 317
一，设置答题器选项import React, { useState, useEffect } from 'react' import PropTypes from 'prop-types' import _ from 'lodash' import CloseButtonSmall from '../CloseButtonSmall' import LargeButton...
react 经典面试题 参考类型 面试必考
xinmenglin的博客
04-15 405
react 常见面试题 1.当你调用 setState 的时候，发生了什么事？ 将传递给 setState 的对象合并到组件的当前状态， 这将启动一个和解的过程，构建一个新的 react 元素树， 与上一个元素树进行对比（diff），从而进行最小化的重渲染。 2. .React 项目用过什么脚手架（本题是开放性题目） 答：creat-react-app Yeoman 等 解析：原理回答用webpa...
分享 20 道关于 React 开发相关的面试题及答案
前端达人
04-11 2652
React 面试可能你会觉得有点吓人，为了帮助您自信并准备好迎接下一次面试，我们列出了 20 个常见的 React 问题和参考答案。希望通过本篇文章的内容，能够帮助你重新温习你的 React 知识，复习重要概念，并为你的下一次面试做好更充分的准备，展示你的自信。那么，让我们开始吧！React JS 面试问题和答案——练习测试1. 你能解释一下什么是 React 以及它与其他 JavaScript ...
vue-cli2+webpack
荔枝同学
07-18 306
创建过程及目录结构
vue-cli2中的webpack打包文件地址出错问题
李墨瞳的博客
11-15 696
已经不是第一次遇到，结果今天还是再问了一遍我们另外一个前端小姐姐，来记录一下。 首先放出报错信息：    当时反应就是，我Dev环境跑起来这么欢快，小老弟，你测试环境你怎么肥四啊？你背着我把文件存哪去了！然后想来想去去找度娘。emmm，信息特别杂乱。那就只能靠我另外一个前端小姐姐了。最后做了3点修改，就完成了。 1：背景图片必须放在static里面。（我之前都不知道，小声bb） 2：在c...
vue怎么配置webpack-obfuscator
05-17
其中，以上配置为常用配置，还可以根据需要进行更多配置。 4. 执行npm run build进行打包，WebpackObfuscator插件会自动将JavaScript代码进行混淆。 需要注意的是，混淆后的代码不易于阅读和调试，因此在开发和...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值