本文属于学习笔记,如果发现错误,希望及时指正,谢谢~
webpack版本
- webpack1.x
- webpack2.x
- webpack3.x
- webpack4.x
- 官网:
https://webpack.js.org/
- 补充其他
静态开发(H5+C3) gulp vue\react -> webpack DEMO -> webpack 转
webpack是什么?
- 打包(bundle)工具(模块打包器)
- 前端工程师,必不可少工具
- webpack4.x
webpack作用:
- 打包 (把多个文件打包成一个js文件, 减少服务器压力、带宽)
- 转化 (比如less、sass、ts) 需要loader
- 优化 (SPA越来越盛行,前端项目复杂度高, webpack可以对项目进行优化)
webpack构成:
- 入口 entry
- 出口 output
- loaders 转化器
- plugins 插件
- devServer 开发服务器
- mode 开发模式/生产模式
- 先必须确保node环境已经安装:nodejs.org -> download -> 下一步
安装webpack:
- npm install webpack-cli -g
- npm install [email protected] -g
OR - yarn add webpack-cli -g
- 验证webpack环境已经ok? webpack -v
卸载webpack:
`npm uninstall webpack -g`
package.json 项目主要依赖配置文件
`npm init -y`
开发环境: (development)
就是你平时编写代码的环境
npm i jquery --save-dev
npm i jquery -D
生产环境: (production)
项目开发完毕,部署上线
npm i jquery --save
npm i jquery -S
- 例:
npm i jquery npm un jquery npm i jquery --save-dev npm i jquery --save npm i jquery --save-dev jquery
- 安装多个 中间用空格分割:
npm i jquery loadsh aaa bbb ccc -D
- npm如何配置:
npm install -g npm --registry=https://registry.npm.taobao.org
跑一跑webpack:
- 创建webpack-demo文件夹
- webpack-demo下
- 创建src,然后src下创建index.js(将被打包为bundle.js)
- 创建dist,dist下创建index.html(html中引入bundle.js文件)
- 终端里运行:
webpack src\index.js --output dist/bundle.js
webpack.config.js webpack配置文件
预览:
module.exports={
//入口配置
entry:{},
//出口配置
output:{},
//module.rules
//loaders
module:{},
//插件
plugins:[],
//开发服务器
devServer:{}
};
例:
const path = require('path'); //node系统模块
module.exports={
//入口配置
entry:{
a:'./src/index.js'
},
//出口配置
output:{
//path.resolve就是一个拼接路径的方法,__dirname指当前文件路径
path:path.resolve(__dirname,'dist'), //path必须是绝对路径,指输出文件目录
//filename输出文件名
filename:'bundle.js'
}
};
注意:
- 配置文件名字一定得叫 webpack.config.js 答: 不是
- 如果改名叫: mmr.config.js,运行时候:
1. 终端运行 webpack --config mmr.config.js 2. 更改package.json中build为"webpack --config mmr.config.js",然后终端运行npm run build package.json: "scripts": { "build": "webpack --config mmr.config.js", "dev":"xxx", "aaa":"xxx" } npm run build
- 如果改名叫: mmr.config.js,运行时候:
- parcel 零配置,webpack4.x 实现所谓的0配置
- mode:
webpack --mode development webpack --mode production 明显文件被压缩
多入口(多文件)打包一起:
const path = require('path');
module.exports = {
entry:['./src/index.js','./src/index2.js'], //按照顺一起打包 bundle.js
output:{
path:path.resolve(__dirname, 'dist'),
filename:'bundle.js'
}
};
多入口多出口配置:
const path = require('path');
module.exports = {
entry:{
index:'./src/index.js',
index2:'./src/index2.js'
},
output:{
path:path.resolve(__dirname, 'dist'),
//输出为两个文件,分别是index.bundle.js和index2.bundle.js,这就是[name]的作用,但是最后dist中index.html文件中引入文件名也要手动更改为index.bundle.js和index2.bundle.js
filename:'[name].bundle.js'
}
};
html-webpack-plugin:
手册:https://www.npmjs.com/package/html-webpack-plugin#
安装注意
- 依赖webpack、webpack-cli
- 下载:npm i webpack webpack-cli -D
- 安装完之后直接就可以生成dist文件目录,也就是只要有src,package.json就能生成过dist文件夹并且包含js文件和html文件
生成页面
- 安装
npm i html-webpack-plugin -D
- 引入
const HtmlWebpackPlugin = require('html-webpack-plugin');
-
使用
plugins:[ new HtmlWebpackPlugin() ]
例:
const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports={ entry: { index:'./src/index.js', index2:'./src/index2.js' }, output:{ path:path.resolve(__dirname,'dist'), filename:'[name].bundle.js' }, plugins:[ new HtmlWebpackPlugin(), ] }
-
模板:
new HtmlWebpackPlugin({ template:'模板地址' })
-
页面标题:
new HtmlWebpackPlugin({ //一定记得在模板中使用:也就是模板中是这样的<title><%= htmlWebpackPlugin.options.title%></title> title:'xxxxx', template:'模板地址' })
-
生成连接消除缓存
new HtmlWebpackPlugin({ hash:true, title:'xxxxx', template:'模板地址' })
-
压缩输出:
new HtmlWebpackPlugin({ minify:{ collapseWhitespace:true, //压缩空白 removeAttributeQuotes:true //删除属性双引号 }, hash:true, //一定记得在模板中使用:也就是src/index.html中<title>是这样的:<title><%= htmlWebpackPlugin.options.title%></title> title:'I Love China', template:'./src/index.html' })
-
生成多个页面:
filename:'xxx'
-
多页面分别引入自己的js:
chunks:['index']
例:
plugins:[ new HtmlWebpackPlugin({ chunks:['index'], filename:'index4.html', title:'ifhdksah', template:'./src/index.html', }), new HtmlWebpackPlugin({ chunks:['index2'], filename:'index3.html', title:'ifhdksah', template:'./src/index.html', }), ]
10 https://www.npmjs.com/package/html-webpack-plugin
以上使用综合例:
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports={
/*入口配置*/
entry:{
/*a:名字随意起*/
index: './src/index.js',
index2: './src/index2.js'
},
/*出口配置*/
output:{
/*path整体打包路径,必须是绝对路径,
__dirname代表当前webpack.config.js所在目录,是绝对路径*/
path:path.resolve(__dirname , 'dist'),
/*filename名字固定,可以生成两个js文件,这个name是入口文件entry的key值*/
filename:'[name].bundle.js'
},
/*能自动生成dist目录(index.bundle.js,index2.bundle.js等)*/
plugins:[
new HtmlWebpackPlugin({
/*压缩输出*/
// minify:{
// collapseWhitespace:true/*折叠空白区域*/
// },
/*生成链接消除缓存,每个生成的文件名都不一样,类似于这样:"index.bundle.js?3e368073ad67e336b700"*/
// hash:'true',
/*引入js文件*/
chunks:['index'],
/*生成html文件的名字*/
filename:'index.html',
/*可以编辑生成的index文件的标题*/
title:'i an',
/*模板地址*/
template:'./src/index.html'
}),
new HtmlWebpackPlugin({
// 引入js文件
chunks:['index2'],
/*生成html页面的名字*/
filename:' index2.html',
/*可以编辑生成的index文件的标题*/
title:'第二个页面',
/*模板地址*/
template:'./src/index2.html'
})
]
};
结果:可以在生成dist目录,目录中有两个js文件和两个html文件,一个为index.html和index2.html文件,分别引用js文件
clean-webpack-plugin: 删除某些东西(清除)
1. 下载
npm i clean-webpack-plugin -D
2. 引入
const CleanWebpackPlugin = require('clean-webpack-plugin');
3. 使用:
new CleanWebpackPlugin(['dist'])
devServer:
-
下载(如果出错可以一直下载,就是建议把node_modules也删了重新下载)
npm i webpack-dev-server -D
-
使用
devServer:{ //设置服务器访问的基本目录 contentBase:path.resolve(__dirname, 'dist'), //服务器ip地址, localhost host:'localhost', //设置端口 port:8090 }
-
此时
package.json: "scripts": { "build": "webpack --mode development", "dev":"webpack-dev-server --mode development" } 注意这个package
-
想自动打开浏览器:
open:true
-
热更新: hot:true
//放在文件头部,引入插件 const webpack = require('webpack'); //开启 hot:true //在plugins中配置 new webpack.HotModuleReplacementPlugin()
-
官方文档:
https://webpack.js.org/configuration/dev-server/
以上综合例:
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const webpack = require('webpack');
module.exports={
/*入口配置*/
entry:{
/*a:名字随意起*/
index: './src/index.js',
index2: './src/index2.js'
},
/*出口配置*/
output:{
/*path整体打包路径,必须是绝对路径,
__dirname代表当前webpack.config.js所在目录,是绝对路径*/
path:path.resolve(__dirname , 'dist'),
/*filename名字固定,可以生成两个js文件,这个name是入口文件entry的key值*/
filename:'[name].bundle.js'
},
devServer:{
/*设置服务器访问的基本目录*/
contentBase:path.resolve(__dirname , 'dist'),
host:'localhost',
port:8090,
open:true,/*自动打开页面*/
hot:true
},
/*能自动生成dist目录(index.bundle.js,index2.bundle.js等)*/
plugins:[
/*清除dist文件夹*/
/*new CleanWebpackPlugin(['dist']),*/
/*配置热更新,先const引入webpack,然后在plugins中配置一下,然后在dexServer中将hot打开
*/
new webpack.HotModuleReplacementPlugin(),
new HtmlWebpackPlugin({
// 引入js文件
chunks:['index'],
/*生成html页面的名字*/
filename:' index.html',
/*可以编辑生成的index文件的标题*/
title:'china',
/*模板地址*/
template:'./src/index.html'
})
]
};
结果:
1.npm run bulid:可以在生成dist目录,目录中有一个html文件,两个js文件,并且html文件引用两个js文件
2.npm run dev:浏览器自动打开dist中生成index.html文件,并且开启热更新(这个热更新暂时没什么实质性的表示)
loaders: 在webpack里面是一个很重要功能
加载器、转化器
比如: less/scss 转成css
ES7 8
jsx
处理css文件:
- 在引入css文件时注意:
- index.js引入src下的css文件夹中a.css文件
index.js: import './css/a.css'
- 不在文件头部引入(图片引入同理):也就是没有什么const … = require(…)这样的语句
插件: style-loader css-loader 安装:npm i style-loader css-loader -D 配置: module:{ rules:[ { //test匹配规则,以.css后缀名结尾的文件 test:/\.css$/, use:['style-loader','css-loader'] } ] }
- index.js引入src下的css文件夹中a.css文件
- 注意:关于loader写法
1. use:['xxx-loader','xxx-loader'] 2. loader:['xxx-loader','xxx-loader'] 3. use:[ {loader:'style-loader'}, {loader:'css-loader'} ]
打包完以后肯定需要压缩上线:
- 如何压缩:
- webpack4.x:–mode production
由package.json: "scripts": { "build": "webpack --mode development", "dev":"webpack-dev-server --mode development" } 变为package.json: "scripts": { "build": "webpack --mode production", "dev":"webpack-dev-server --mode production" }
- 之前版本
uglifyjs-webpack-plugin 1. 下载插件:npm i uglifyjs-webpack-plugin -D 2. 文件头部引入:const uglify = require('xxx); 3. 在plugin中配置:new ugliufy()
- webpack4.x:–mode production
图片: (png,jpg,gif)
- 插件:url-loader file-loader
- 安装:npm i file-loader url-loader -D
- 配置:
{ test:/\.(png|jpg|gif)$/, use:[{ loader:'url-loader', options:{ limit:50, outputPath:'images' } }] }
- 注意:此时文件
index.js文件中内容为: import './css/a.css'; import imgSrc from './images/大白.jpg'; let o = new Image(); o.onload = function(){ document.appendChild(o); } o.src= imgSrc; a.css文件中内容为: body{ background:url('../images/大白.jpg') right top repeat-y; } webpack.config.js文件中module内容为: module:{ rules:[ { //test匹配规则,以.css后缀名结尾的文件 test:/\.css$/, use:['style-loader','css-loader'], }, { test:/\.(png|jpg|gif)$/, use:[{ loader:'url-loader', options:{ limit:50, outputPath:'images'//所有图片打包在一个images的文件夹 } }] } ] },
分离: css
- 插件:extract-text-webpack-plugin
- 安装:
npm i extract-text-webpack-plugin -D webpack3.x npm i extract-text-webpack-plugin@next -D webpack4.x
- 应用:
- 文件头部:
const ExtractTextPlugin = require('extract-text-webpack-plugin');
- 然后在plugins里面设置:
//new ExtractTextPlugin(文件打包路径) new ExtractTextPlugin('css/index.css')
- 然后再在module中应用:
//所有css文件打包在一个css文件夹 use:ExtractTextPlugin.extract({ fallback:'style-loader', use:'css-loader', publicPath:'../' //解决css背景图,路径问题 })
- 文件头部:
mini-css-extract-plugin:
截止到目前为止(2018-3-23),对背景图路径配置
API文档
下载:npm i mini-css-extract-plugin -D
引入:在文件的最开头引入
使用:pulgins中配置如下
new MiniCssExtractPlugin({
filename:'css/index.css'
})
在module中css部分配置如下:
use[
MiniCssEctractPlugin.loader,'css-loader'
]
综合知识点例:loaders ,css,图片,分离css, mini-css-extract-plugin
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
/*const MiniCssExtractPlugin = require('mini-css-extract-plugin');*/
module.exports={
entry:{
index: './src/index.js',
},
output:{
path:path.resolve(__dirname , 'dist'),
filename:'[name].bundle.js'
},
/*如果想使用css文件的话,配置module模块,并且这里面都是固定配置,名字不能改变*/
module:{
rules:[
{
/*加载css,将css文件提取*/
test:/\.css$/,
use:['style-loader' , 'css-loader'],
/*上面的语句等价于:
loader:['style-loader' , 'css-loader']
也等价于:
use:[
//必须先写style-loader然后写css-loader
{loader:'style-loader'},
{loader:'css-loader'}
]*/
use:ExtractTextPlugin.extract({
fallback:'style-loader',
use:'css-loader',
// 配css里面背景图的路径
publicPath:'../'
})
/*use:[
MiniCssExtractPlugin.loader,
'css-loader'
]*/
},
{
/*将图片打包,并且放在images文件夹中*/
test:/\.(png|jpg|gif)$/,
use:{
loader:'url-loader',
/*当图片大小超过limit值时,图片就转为路径形式,而不是base64,base64特点与路径无关,*/
options:{
limit : 50,
outputPath:'images'
}
}
}
]
},
/*如果在package.json中写的是mode production的话,就是压缩模式,就是将文件打包压缩*/
devServer:{
contentBase:path.resolve(__dirname , 'dist'),
host:'localhost',
port:8090,
open:true,
hot:true
},
plugins:[
new webpack.HotModuleReplacementPlugin(),
new HtmlWebpackPlugin({
title:'china',
template:'./src/index.html'
}),
new ExtractTextPlugin('css/index.css'),
/*new MiniCssExtractPlugin({
filename:'css/index.css',
})*/
]
};
less(参见css,和css一样的):
npm i less less-loader -D
在index.js中import引入a.less文件
-
module下rules { test:/\.less$/, use:['style-loader','css-loader','less-loader'] } less文件夹下a.less文件: @a:red; #less-id{ color: @a; ul{ li{ list-style:none; height:30px; line-height:30px; } } } index.html: <div id="less-id"></div> index.js: import './less/a.less'; webpack.config.js module下rules { test:/\.less$/, use:['style-loader','css-loader','less-loader'] }
分离less:(把less也扔到index.css中)
- module下rules:
{ test:/\.less$/, //use:['style-loader','css-loader','less-loader'] use:ExtractTextPlugin.extract({ fallback:'style-loader', use:['css-loader','less-loader'] }) } 除了:module下rules外,其他文件内容都和那个less一样
sass:(同less一样一样的)
- 安装插件:
npm i node-sass sass-loader -D
- 配置:
{ test:/\.(sass|scss)$/, use:['style-loader','css-loader','sass-loader'] }
提取sass:
```
{
test:/\.(sass|scss)$/,
use:ExtractTextPlugin.extract({
fallback:'style-loader',
use:['css-loader','sass-loader']
})
}
```
- transform:-webkit-transform:
自动处理前缀:
-
安装插件:
npm i postcss-loader autoprefixer -D
-
准备 postcss.config.js文件 配置postCss
module.exports ={ plugins:[ require('autoprefixer') ] };
-
配置loader
module下rules: { use:[ {loader:'style-loader'}, {loader:'css-loader'}, {loader:'postcss-loader'} ] }
-
提取出来
module下rules: { use:ExtractTextPlugin.extract({ fallback:'style-loader', use:['css-loader','postcss-loader'], publicPath:'../' //解决css背景图,路径问题 }) }
-
postCss 预处理器 , 专门处理css平台
消除冗余css代码:Purifycss
- 下载:
npm i purifycss-webpack purify-css -D
- 引入插件
const PurifyCssWebpack = rewquire('purifycss-webpack');
- 需要引入一个额外包glob
- 下载:
npm i glob -D
- 引入:
const glob = require('glob');
- 下载:
- 在plugins里面配置
new PurifyCssWebpack({ //*.html匹配所有html文件,将用到的css保留,不用的清除(例如:没有用到的样式,选择器什么的), paths:glob.sync(path.join(__dirname, 'src/*.html')) })
调试:
- webpack4.x 开启调试:
--mode development
- webpack3.x之前:
sourceMap //这个devtool是放在与plugins或者module平级的位置上,也就是: module:{...}, devtool:'source-map', plugins:{...}
babel:
- webpack已经实现了支持esnext所有语法
- babel用来编译js - 让你很轻松的使用 ESnext,转化 - jsx
- 如果碰到不支持的
1.那就先下载插件,然后在module中的rules中配置如下选项(这里配置的只是一个预设,得把它装在.babelrc文件中才能成功) 2.然后再新建一个.babelrc文件,具体配置如下: 1.插件:babel-core bable-loader babel-preset-env 2.插件下载: npm i babel-loader babel-core babel-preset-env -D 3.配置:module下rules: { test:/\.(js|jsx)$/, use:['babel-loader'], //检索的位置不包含node_modules exclude:/node_modules/ } 4. .babelrc文件配置:放在src同级目录 { "presets":{ "env" } } ESnext所有语法
- 创建js文件夹,再创建a.js文件
a.js文件中内容为: export const a = 12, export const a = 5 index.js文件中内容为: import {a, b} from './js/a.js'; module下rules: { test:/\.(js|jsx)$/, use:['babel-loader'], //检索的位置不包含node_modules exclude:/node_modules/ }
如果是jsx文件
jsx:
npm i babel-preset-react -D
npm i react react-dom -D
就是需要配置react等等插件
在webpack中用模块化:和node一模一样
-
导出:(新建文件存储模块,例如webpack.rules.js,然后最后把存储数据的变量利用下面一行语句导出)
module.exports = xxx
-
引入:(在webpack.config.js文件头用下面语句导入,记得一定要加./ 代表本地文件)
require('./xxxxx');
-
完整例子:
webpacl.rules.js文件中内容为: //注意插件引入 const ExtractTextPlugin = require('extract-text-webpack-plugin'); const rules = { rules:[ {w /*加载css,将css文件提取*/ test:/\.css$/, /*use:['style-loader' , 'css-loader'],*/ /*上面的语句等价于: loader:['style-loader' , 'css-loader'] 也等价于: */ /*use:[ //必须先写style-loader然后写css-loader {loader:'style-loader'}, {loader:'css-loader'}, {loader:'postcss-loader'} ]*/ /*提取分离css*/ use:ExtractTextPlugin.extract({ fallback:'style-loader', use:['css-loader','postcss-loader'], // 配css里面背景图的路径 publicPath:'../' }) /*use:[ MiniCssExtractPlugin.loader, 'css-loader' ]*/ }, /*配置bebel,为了支持esnext语法,不过webpack现在已经都支持了,但是要知道是这么配的*/ /*{ test:/\.(js|jsx)$/, use:['babel-loader'], exclude:/node_modules/ },*/ { /*将图片打包,并且放在images文件夹中*/ test:/\.(png|jpg|gif)$/, use:{ loader:'url-loader', /*当图片大小超过limit值时,图片就转为路径形式,而不是base64,base64特点与路径无关,*/ options:{ limit : 50, outputPath:'images' } } }, { test:/\.less/, /*顺序:先是less-loader修饰,然后css-loader加载,然后再扔到style-loader,也就是use里面的顺序是从右往左的*/ /*use:['style-loader' , 'css-loader' , 'less-loader']*/ use:ExtractTextPlugin.extract({ fallback:'style-loader', use:['css-loader' , 'less-loader'] }) }/*, { test:/\.sass$/; use:['style-loader','css-loader' ,'sass-loader'] }*/ ] }; module.exports = rules; webpack.config.js文件中内容为: //1.引入文件 const rulesConfig = require('./webpack.rules.js'); //使用 entry:{...}, module:rulesConfig, plugins:[...],
在webpack中使用json:
- 之前插件:json-loader
- 但是到webpack.3x版本之后不用,json可以默认就识别
- 先创建json文件,
webpack.config.json文件内容为: { "entry":"./src/index.js" }
- 在webpack.config.js文件头部导入利用如下语句
记住,不可用import,webpack不支持,但是在src下的index.js也就是入口文件这里可以用,因为这个index.js文件可以利用webpack.config.js文件中的babel模块包装,
- 所需文件:
(1)webpack.config.js文件内容为: //头部引入文件: const jsonConfig = require('./webpack.config.json'); //使用: module.exports={ {...}, entry:{ index: jsonConfig.entry, jquery:'jquery' }, {...} } (2)webpack.config.json文件内容为: { "entry":"./src/index.js" }
- 先创建json文件,
静态资源输出: copy-webpack-plugin
- 下载
npm i copy-webpack-plugin -D
- 引入
const CopyWebpackPlugin = require('copy-webpack-plugin');
- 使用
plugins:[ new CopyWebpackPlugin([{ from:path.resolve(__dirname, 'src/assets'), to:'./public' }]) ]
补充:
- 官网->插件什么的:
https://webpack.js.org/plugins/copy-webpack-plugin/
都在npm上:www.npmjs.com github issues
使用第三库:
- 直接npm下载,然后在index.js也就是入口文件处引入(完全可以使用,但是我个人不是很推荐)
(1)安装:npm i jquery -S (2) src下的index.js 文件处使用: import $ from 'jquery'; $('#box').css({ width:'100px', height:'100px', background-color:'red' }) src下的index.html文件内使用:<div id="box"></div>
- ProvidePlugin (个人推荐此方式)
这个插件是webpack自带的插件,不需要下载,只需要保证webpack在就行 使用: //引入插件 const webpack = require('webpack'); //在plugins里面使用: new webpack.ProvidePlugin({ $:'jquery', lodash:'lodash' .... })
- 通过ProvidePlugin和 import直接引入区别:
(1). import $...,引入之后,无论你在代码中是否使用jquery,打包后,都会打进去,这样其实产生大量的冗余js (2). Provideplugin, 只有你在使用到此库,才会打包
提取第三方(自己感觉想提取)js库:
- 之前webpack3.x版本之前:
在plugins里面配置: new webpack.optimize.CommonsChunkPlugin({ name:'jquery' })
- 到了webpack4.x版本:
用到:optimization.splitChunks webpack.config.js文件中配置: module.exports = { entry:{ index: jsonConfig.entry, jquery:'jquery' }, optimization:{ splitChunks:{ cacheGroups:{ vendor:{ chunks:'initial', name:'jquery', enforce:true } } } }, plugins:[...], ... } optimization:{ splitChunks:{ cacheGroups:{ aaa:{ chunks:'initial', name:'jquery',//和入口entry中key名一样,最后生成jquery.bundle.js文件 enforce:true }, /*如果再要生成一个文件,就entry入口key值和这个name值要对应*/ bbb:{ chunks:'initial', name:'入口名称', enforce:true } } }
webpack-demo文件夹中(具体查看webpack-demo文件夹)
- webpack.config.js文件:
const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const webpack = require('webpack'); const ExtractTextPlugin = require('extract-text-webpack-plugin'); const PurifyCssWebpack = require('purifycss-webpack'); const glob = require('glob'); /*./为了区分用npm下载的模块和本地下载的模块*/ const rulesConfig = require('./webpack.rules.js'); const jsonConfig = require('./webpack.config.json'); /*const MiniCssExtractPlugin = require('mini-css-extract-plugin');*/ const CopyWebpackPlugin = require('copy-webpack-plugin'); module.exports={ entry:{ index: jsonConfig.entry, jquery:'jquery' }, output:{ path:path.resolve(__dirname , 'dist'), filename:'[name].bundle.js' }, /*如果想使用css文件的话,配置module模块,并且这里面都是固定配置,名字不能改变*/ /*创建单独的文件webpack.rules.js,存储rules文件,然后导出到这里就行了*/ module:rulesConfig, /*如果在package.json中写的是mode production的话,就是压缩模式,就是将文件打包压缩*/ devServer:{ contentBase:path.resolve(__dirname , 'dist'), host:'localhost', port:8090, open:true, hot:true }, plugins:[ new webpack.HotModuleReplacementPlugin(), new HtmlWebpackPlugin({ title:'china', template:'./src/index.html' }), new ExtractTextPlugin('css/index.css'), /*new MiniCssExtractPlugin({ filename:'css/index.css', })*/ new PurifyCssWebpack({ /*sync同步的方法 join用来合并路径的,其实和resolve没啥区别 */ /*作用:根据路径找模版,根据模版找哪些引用css,哪些没引用css,然后把没被引用的css的给删了*/ paths:glob.sync(path.join(__dirname , 'src/*.html')) }), /*静态资源输出*/ new CopyWebpackPlugin([{ from:path.resolve(__dirname,'src/assets'), to:'./public' }]), new webpack.ProvidePlugin({ $:'jquery' }) ], optimization:{ splitChunks:{ cacheGroups:{ ventor:{ chunks:'initial', name:'jquery', enforce:true } } } } }
- webpack.rules.js文件:
const ExtractTextPlugin = require('extract-text-webpack-plugin'); const rules = { rules:[ { /*加载css,将css文件提取*/ test:/\.css$/, /*use:['style-loader' , 'css-loader'],*/ /*上面的语句等价于: loader:['style-loader' , 'css-loader'] 也等价于: */ /*use:[ //必须先写style-loader然后写css-loader {loader:'style-loader'}, {loader:'css-loader'}, {loader:'postcss-loader'} ]*/ /*提取分离css*/ use:ExtractTextPlugin.extract({ fallback:'style-loader', use:['css-loader','postcss-loader'], // 配css里面背景图的路径 publicPath:'../' }) /*use:[ MiniCssExtractPlugin.loader, 'css-loader' ]*/ }, /*配置bebel,为了支持esnext语法,不过webpack现在已经都支持了,但是要知道是这么配的*/ /*{ test:/\.(js|jsx)$/, use:['babel-loader'], exclude:/node_modules/ },*/ { /*将图片打包,并且放在images文件夹中*/ test:/\.(png|jpg|gif)$/, use:{ loader:'url-loader', /*当图片大小超过limit值时,图片就转为路径形式,而不是base64,base64特点与路径无关,*/ options:{ limit : 50, outputPath:'images' } } }, { test:/\.less/, /*顺序:先是less-loader修饰,然后css-loader加载,然后再扔到style-loader,也就是use里面的顺序是从右往左的*/ /*use:['style-loader' , 'css-loader' , 'less-loader']*/ use:ExtractTextPlugin.extract({ fallback:'style-loader', use:['css-loader' , 'less-loader'] }) }/*, { test:/\.sass$/, use:['style-loader','css-loader' ,'sass-loader'] }*/ ] }; module.exports = rules;
补充:
npm ...... -D 安装在当前文件夹中的node_modules文件夹中
npm ...... -S 安装在c盘下用户下83612下的node_modules
vue插件
1.安装:npm i vue -D
2.使用:
- 第一种方式:
(1)main.js(index.js)文件夹中: import Vue from '../node_modules/vue/dist/vue.js' var vm = new Vue({ el: '#app', data: { msg: '123' } }), (2)index.html文件夹中: <div id="app">{{msg}}</div>
- 第二种方式:
(1)main.js(index.js)文件中配置: import Vue from 'vue'; (2)webpack.config.js中配置: module.exports = { entry:{...}, plugins:[...], resolve: { alias: { // 修改 Vue 被导入时候的包的路径 // "vue$": "vue/dist/vue.js" } } }
vue组件插件
- 安装插件:npm i vue-loader vue-template-compiler -D
- 使用:
- 第一种方式: index.js中配置更改默认加载文件为vue.js不是那个什么runtime什么.js那个文件
import Vue from '../node_modules/vue/dist/vue.js' var login = { template: '<h1>这是login组件,是使用网页中形式创建出来的组件</h1>' } var vm = new Vue({ el: '#app', data: { msg: '123' }, components: { login } render: c => c(login) })
- 第二种方式:
1.webpack.config.js文件 //(1)头部引入: const VueLoaderPlugin = require('vue-loader/lib/plugin'); entry:{...}, //(2)module下rules配置loader module:{ rules:[ { test: /\.vue$/, use: 'vue-loader' }, ] }, //(3)plugins中配置 plugins:[ new VueLoaderPlugin(), ], 2.src下创建login.vue文件: <template> <div> 小仙女 </div> </template> 3.入口文件index.js文件: import Vue from '../node_modules/vue/dist/vue.js' import login from './login.vue' var vm = new Vue({ el: "#app", data:{ msg : 'a', }, <!-- render:function(c){ return c(login) } --> render:c=>c(login), })
- 第一种方式: index.js中配置更改默认加载文件为vue.js不是那个什么runtime什么.js那个文件