在这篇文章中，我们将带领您了解webpack(4)配置打包css的全貌，包括webpack打包css的相关情况。同时，我们还将为您介绍有关02-webpack的基本配置和输入webpack实现自动打包
在这篇文章中，我们将带领您了解webpack(4)配置打包css的全貌，包括webpack 打包css的相关情况。同时，我们还将为您介绍有关02-webpack的基本配置和输入webpack实现自动打包、04- webpack打包css资源、extract-text-webpack-plugin 打包css报错的解决、vue webpack配置打包独立js文件的知识，以帮助您更好地理解这个主题。
本文目录一览：- webpack(4)配置打包css（webpack 打包css）
- 02-webpack的基本配置和输入webpack实现自动打包
- 04- webpack打包css资源
- extract-text-webpack-plugin 打包css报错的解决
- vue webpack配置打包独立js文件
webpack(4)配置打包css（webpack 打包css）
1.这里打包css的方式使用css-loader和style-loader，css-loader用于将js中引入的css打包在一起，style-loade用于将js中引入的css引入到html中。
2.首先安装css-loader和style-loader：npm install css-loader style-loader -D
3.在（3）的文件基础上面，再建一个index.css文件：
#Box{ width: 200px; height: 200px; color: blue; background-color: red; } 在index.html中加入代码：<div id="Box"> Box </div> 将css引入到index.js中： require('../css/index.css') 4.完整的webpack.config.js文件：
const{resolve}=require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports={ entry:{ vender:['./src/js/jquery.js','./src/js/common.js'], index:'./src/js/index.js', cart:'./src/js/cart.js' }, output:{ path:resolve(__dirname,'build'), filename:'[name].js' }, mode:'development', module:{ rules:[ {test:/\.css$/,use:['style-loader','css-loader']}//加入规则使用css-loader个style-loader来加载以.css为后缀的文件。这里两个loader的顺序不能写反，是先使用后面那个css-loader将css和js打包在一起，再使用style-loader来加载js中的css文件 ] }, plugins:[ new HtmlWebpackPlugin({ template:'./src/index.html', filename:'index.html', chunks:['vender','index'] }), new HtmlWebpackPlugin({ template:'./src/cart.html', filename:'cart.html', chunks:['vender','cart'] }), ] } 5.执行npx webpack进行打包
02-webpack的基本配置和输入webpack实现自动打包
1安装webPack的方式 01==》 第一次全局安装 npm i webpack -g 第一次安装了之后以后就不需要在安装了
查看webpack的版本,webpack -V 我的版本是3.8.1
如果出现对应的版本， 你就不需要再次执行 npm i webpack -g
说明你已经安装过webpack了；
02==》 创建一个文件夹；如testwebpack 在项目根录下(testwebpack)运行 npm i webpack --save-dev 安装到项目依赖中去
会出现两个文件夹；node_modules package.json这个两个文件夹
如果没有 package.json ；你就执行 npm init -y
2尝试使用webpack 安装包描述文件 npm init -y 新版本的node会自带这个的;
npm i jquery -S 安装jq 保存到依赖列表中去了；
此时你就可以在package.json 看见自己已经安装了jquery了
testwebpack目录下==》新建src目录 在src目录下 新建index.html文件 在src目录下新建main.js文件
src目录下创建 imgs文件夹 和js文件夹（文件结构不要错了） 在main.js文件中导入jq 导入的语法是 import ** from **它是es6中导入模块的方式 1 如 import $ from 'jquery' 注意大小写 从引入文件可以知道 首先是在自己的兄弟目录中去找
然后去父级目录的兄弟目录中去找 然后依次类推（重点）
import $ from "jquery";
$(function(){ console.log("haha") }) 在node.js中 你要是这样写的 const $=require("Jquery") 由于es6的import导包的方式台高级了 所以浏览器解析不了 所以import $ from 'Jquery'汇报错 所以需要webpack来惊醒转化
运行webpack。 webpack ./src/mian.js ./dist/testindex.js 在dist中被编译的文件是为testindex.js 此时你就会发现，项目目录下多了一个dist文件夹；和文件夹下有个文件； 注意：如果如果你配置了webpack.config.js,再次运行上面的命令；会报错
配置webpack和命令运行；
3在项目的跟目录下创建webpack.config.js文件配置如下;
const path = require("path");
module.exports={ entry:path.join(__dirname,'./src/main.js'),//入口文件 使用webpack要打包哪一个文件 output:{ 输出相关的配置 path:path.join(__dirname,'./dist'),1)">指定打包好的文件会输出到哪一个目录（dist)下去 filename:"testindex.js" //指定打包好的文件的名称叫什么名字 } } 3所以在index中的时候我们就引入被webpack编译好的js文件就可以了 <script src="../dist/testindex.js"></script>
这里引入的时候需要注意的点是：
之所以是testindex.js是因为配置写的编译成testindex.js
如果你已经向上面这样配置了 可以直接在项目的根目录下webpack就可以运行了
因为已经配置好了
webpack 能够处理的问题
ebpack能够处理js文件之间的互相依赖关系
webpack能够处理js的兼容性问题 能装将es6的语法转化为es5的语法
我们可以发现引入jquery的两种方式
const $=require("Jquery")
import $ from 'jquery'
04- webpack打包css资源
- 下载两个loader插件
npm i css-loader style-loader -D
- css-loader 的作用是处理css中的 @import 和 url 这样的外部资源
- style-loader 的作用是把样式插入到 DOM中，方法是在head中插入一个style标签，并把样式写入到这个标签的 innerHTML里，就是内联样式
- 如果rules只用一个loader, 就use:[] 写成loader: “css-loader”
- 使用插件
const {resolve} = require("path") //从path中接收resolve方法
const htmlWebpackPlugin = require("html-webpack-plugin") //引入html打包插件
module.exports={
entry: {
vendor: ["./src/js/jq.js","./src/js/common.js"],
index: "./src/js/index.js",
cart: "./src/js/chart.js"
},
output: {
path: resolve(__dirname, "./build"), //输出路径
filename: "[name].js" //输出文件名
},
mode: "development", //webpack使用相应的模式配置
module: { //css打包规则
rules: [{
test: /\.css$/, //把项目中所有以.css结尾的文件打包,插入到html里
use: ["style-loader","css-loader"]
// use数组中loader执行顺序：从右到左，从下到上 依次执行
//style-loader 创建style标签，将js中的样式资源插入进行，添加到head中生效
//css-loader 将css文件变成commonjs模块加载js中，里面内容是样式字符串
}]
},
plugins: [
//默认创建一个空的html，目的就是自动引入打包的资源js/css
new htmlWebpackPlugin({ //引用插件
template: "./src/index.html", //index.html不用加script，也可以自动引入js文件
filename: "index.html", //输出的打包的文件名
chunks: ['index','vendor'],
// 压缩HTML代码
minify: {
//移除空格
collapseWhitespace: true,
//移除注释
removeComments: true
}
}),
new htmlWebpackPlugin({ //引用插件
template: "./src/chart.html", //index.html不用加script，也可以自动引入js文件
filename: "chart.html", //输出的打包的文件名
chunks: ['cart','vendor']
})
]
}
- 目录结构
style.css
body {
margin: 0;
padding: 0;
}
p {
color: red;
font-size: 25px;
}
h1 {
color: blue;
font-size: 88px;
}
.Box {
width: 100px;
height: 150px;
background-color: bisque;
color: blueviolet;
}
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>商城首页~~~~~~</h1>
<p>打包css</p>
<divhttps://www.jb51.cc/tag/Box/" target="_blank">Box">
this is a Box1
</div>
<divhttps://www.jb51.cc/tag/Box/" target="_blank">Box2">
this is a Box2
</div>
<divhttps://www.jb51.cc/tag/Box/" target="_blank">Box3">
this is a Box3
</div>
</body>
</html>
index.js
//引入css文件（commonjs）
require("../css/style.css")
//也可以使用ES6的模块引入
//import "../css/style.css"
console.log("首页专用js文件");
- 执行
webpack
css以内联样式插入到html文件里
extract-text-webpack-plugin 打包css报错的解决
全局安装的webpack版本是v4.12.1，但是package.json引用的webpack版本是v3.6.0，install下来/node_modules/里面webpack版本是v3.12.0。
在控制台输入webpack -v，得到的结果是4.12.1。
这是webpack环境。
开始引入extract-text-webpack-plugin，默认的版本是v3.0.2，运行webpack报错：
$ webpack
(node:18800) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
C:\Users\EEE\AppData\Roaming\npm\node_modules\webpack\lib\Chunk.js:752
throw new Error(
^
Error: Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead
找了很多文章，都说是版本问题，下载了extract-text-webpack-plugin 4.0.0-beta.0版本，运行还是报错：
$ webpack
C:\Users\EEE\Desktop\webpack\node_modules\_extract-text-webpack-plugin@4.0.0-beta.0@extract-text-webpack-plugin\dist\index.js:217
extractedChunk.addGroup(chunkGroup);
^
TypeError: extractedChunk.addGroup is not a function猜想会不会是webpack版本也需要升级，我删掉了package.json引用的webpack，打算使用全局webpack。
重新install，运行webpack，还是报错：
$ webpack
C:\Users\EEE\AppData\Roaming\npm\node_modules\webpack-cli\bin\cli.js:244
throw err;
^
Error: Cannot find module ''webpack/lib/Chunk''似乎必须要引入webpack，在package.json再次引webpack，v4.12.0。
得到的/node_modules/下的webpack版本是v4.26.1。
再次执行webpack，这次成功了。
这是一次很简单的采坑，但是前后困扰了我好几天。
附配置文件：
webpack.config.js
const path = require(''path'');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
entry: ''./src/index.js'',
output: {
path: path.resolve(__dirname, ''dist''),
publicPath: ''/dist/'',
filename: ''bundle.js''
},
mode: ''production'',
module: {
rules: [
{
test: /\.css$/,
//loader: [''style-loader'',''css-loader'']
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: ''url-loader'',
options: {
limit: 10000*4,
name: ''[name].[ext]?[hash]''
}
}
]
},
plugins: [
new ExtractTextPlugin("styles.css"),
]
};package.json
{
"devDependencies": {
"css-loader": "^0.28.7",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"file-loader": "^1.1.4",
"style-loader": "^0.23.1",
"url-loader": "^0.5.8",
"webpack": "^4.12.0"
}
}
vue webpack配置打包独立js文件
独立打包js文件，方便发布后快捷修改
-
经过网络搜索后，有以下几个方案
-
配置独立entry
倒是有单独打包了，不过被压缩了 -
webpack不混淆、不压缩指定js文件
通过配置loader确实实现了js文件的独立打包，但是，在文件里直接import或者require返回的都是路径 -
来自segmentfault的回答
通过public/index文件全局挂载 -
来自知乎的回答
挂载到window上，跟上面的回答没有太大区别
总而言之，就是要实现
runtime有效 -
-
个人倾向于external的用法
在public/index.html通过script标签注入js，然后在webpack的配置里配置externals: {<项目内引用的名字>: <环境中变量的名字>}即可
关于webpack(4)配置打包css和webpack 打包css的问题就给大家分享到这里，感谢你花时间阅读本站内容，更多关于02-webpack的基本配置和输入webpack实现自动打包、04- webpack打包css资源、extract-text-webpack-plugin 打包css报错的解决、vue webpack配置打包独立js文件等相关知识的信息别忘了在本站进行查找喔。
本文标签：
![[转帖]Ubuntu 安装 Wine方法（ubuntu如何安装wine）](https://www.gvkun.com/zb_users/cache/thumbs/4c83df0e2303284d68480d1b1378581d-180-120-1.jpg)
