本节就是对前面的webpack3一个高度的概括
- webpack3 简单来说就是一个模块打包机。他把JS CSS IMG能打包的都能打包变成了一个JS文件
- 这样节省了资源但是目前都是单页面打包。多页面打包的最好利用vue来实现。
- 打包后但是搜索引擎不会收录的切记切记
下面开始说步骤
首先你要准备好一套简单的模板我这里拿很早以前写的知问做参考了。他利用了jqueryui
-
(1) 在项目的目录下面新建2个文件夹 第一个起名叫src第二个起名叫dist
说明src就是我们的源文件目录。 dist就是我们编译好以后要输出的目录 - (2) 初始化npm 以及 全局和本地安装webpack
(i) 初始化
npm init
(ii)全局命令
npm install -g webpack --save-dev
(iii)本地命令
npm i webpack --save-dev
i就是--install的简写
(iv) 要是安装好以后查看下webpack版本
webpack -v
(i)在项目的根目录下面新建一个文件叫webpack.config.js文件 里面写好下面配置
module.exports = {
//入口配置项
entry: {},
//出口文件配置项
output: {},
//模块:例如解读css图片如何转换,压缩等等
module: {},
//插件:用于生产模板和各项功能
plugins: [],
//配置webpack开发服务的各项功能
devServer: {}
}
(ii) 然后在里面接着写配置修改入口和出口文件
//入口配置项
entry: {
entry:"./src/enter.js"
},
//出口文件配置项
output:{
path: path.join(__dirname,"/dist"),
filename:"enter.js"
},
(iii) 在src的目录下面建立一个enter.js这个以后就是我们的入口文件
(iv) 这样以后在打包的时候我们使用webpack命令即可
webpack
(i) 首先安装webpack-dev-server这个包
npm i webpack-dev-server -D
(ii) 在webpack.config.js里面引入path模块
let path = require("path");
(iii) 修改webpack.config.js里面的devServer
devServer:{
//设置基本目录结构
contentBase:path.join(__dirname,"/dist"),
//服务器的IP地址 也可以使用localhost
host:"localhost",
//服务器压缩是否开启
compress: true,
//配置服务器端口号
port: 1717
}
(iiii) 接着修改package.json里面的scripts
"scripts":{
"server" : "webpack-dev-server"
},
(v) 最后在执行
npm run server
这样热更新就做好了
(i) CSS打包需要两个依赖包一个叫做css-loader一个叫做 style-loader
css-loader主要解决HTML文件中标签问题
style-loader主要解决css中路径问题
首先安装着两个包
npm i css-loader style-loader -D
(ii) 入口文件一定要引入你加载的CSS文件
import css from"./css/jquery-ui.css";
import css from "./css/style.css";
(iii) 配置webpack.config.js里面的module增加规则
module:{
rules:[
{
test:/\.css$/,
use:['style-loader','css-loader']
}
]
},
(i) 这里就需要两个包 一个叫做file-loader一个叫做url-loader
(ii) 首先安装这两个包
npm i file-loader url-loader -D
(iii) 接着在配置webpack.config.js中模块
module:{
rules:[
{
test:/\.css$/,
use:['style-loader','css-loader']
},
{
test:/\.(jpg|png|gif)/,
use:[
{
loader:"url-loader",
options:{
limit:50000,
outputPath: 'images/'
}
}
]
}
]
}
- 安装包依赖
npm install html-withimg-loader -D
2.在模块下面配置loader
{
test:/\.(html|htm)$/i,
use:['html-withimg-loader']
}
这里就需要用到一个包叫做extract-text-webpack-plugin
(i) 安装这个包
npm install extract-text-webpack-plugin --save-dev
(ii) 安装完成后 需要在webpack.config.js中引入这个包
const extracTextPlugin = require("extract-text-webpack-plugin");
(iii) 配置webpack.config.js文件中的插件
plugins:[
//把CSS独立出来，不要打包到js文件中去里面写的就是独立出来后的路径
new extracTextPlugin("/css/jquery-ui.css"),
new extracTextPlugin("/css/style.css"),
],
(iv)最后在修改module下面的css规则
{
test:/\.css$/,
use: extracTextPlugin.extract({
fallback: "style-loader",
use:"css-loader"
})
},
(v)这样css就分离出来了
(i) 第一步安装包html-webpack-plugin
npm install html-webpack-plugin --save-dev
(ii) 在webpack.config.js文件中引入这个包
const htmlplugin = require("html-webpack-plugin");
(iii) 在webpack.config.js中 pluigins 增加
new htmlplugin({
minify:{
removeAttributeQuotes: true
},
hash: true,
template:"./src/index.html"
})
(i) 首先在webpack.config.js里面写下面的代码
var website = {
publicPath :"http://localhost:1717"
}
(ii) 然后在出口文件中 写入路径
output:{
path: path.join(__dirname,"/dist"),
filename:"enter.js",
publicPath:website.publicPath
},
(i) 首先第一步安装jquery
npm i jquery --save
(ii) 然后在webpack.config.js里面引入这个webpack
const webpack = require("webpack");
(iii) 最后一步在webpack.config.js里面plugins配置插件
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery'
})
(i) 第一步修改入口文件
entry:{
entry:"./src/entry.js",
jquery:'jquery'
}
(ii) 第二步修改插件里面的配置
//分离jquery
new webpack.optimize.CommonsChunkPlugin({
//入口文件的文字。入口我起的是jquery那么对应的就是jquery
name: 'jquery',
//把文件打包到哪里就一个路径
filename:"js/jquery.min.js",
//最小打包文件的模块数,这里写2就好了
minChunks:2
})
(iii) 要是有第三方插件的话就在项目入口处引入
require('./js/jquery-ui.min.js');
require('./js/style.js');
$("#reg_a").html("注册哈哈");
这样既可
(i) 安装包
npm i -D babel-core babel-loader babel-preset-env babel-preset-react
(ii) 在网站的根目录新建一个文件叫.babelrc里面写入
{
"presets":["react","env"]
}
(iii) 在webpack.config.js中写入
/*用于babel配置*/
{
test:/\.(jsx|js)$/,
use:{
loader:"babel-loader"
},
exclude:/node_modules/
}
-
(1) 安装包依赖html-webpack-plugin
npm install html-webpack-plugin --save-dev
(2)在webpack.config.js里面 引入html-webpack-plugin
const htmlplugin = require("html-webpack-plugin");
(3) 在配置文件里面写
new htmlPlugin({
minify:{
removeAttributeQuotes: true
},
hash: true,
template:"./src/index.html"
})
这样即可
