安装指定版本的webpack
npm install webpack@3.6 -g
安装live-server 运行项目插件 输入live-server 运行后自动打开网页
npm install -g live-server
webpack.config.js
module.exports={
//入口文件的配置项
entry:{},
//出口文件的配置项
output:{},
//模块：例如解读CSS,图片如何转换，压缩
module:{},
//插件，用于生产模版和各项功能
plugins:[],
//配置webpack开发服务功能
devServer:{}
}
- entry：配置入口文件的地址，可以是单一入口，也可以是多入口。
- output：配置出口文件的地址，在webpack2.X版本后，支持多出口配置。
- module：配置模块，主要是解析CSS和图片转换压缩等功能。
- plugins：配置插件，根据你的需要配置不同功能的插件。
- devServer：配置开发服务功能，后期我们会详细讲解。
webpack配置了 热更新 需要安装webpack-dev-server
安装 webpack-dev-server webpack是3.6版本 对应 webpack-dev-server 2.9.4版本
npm install webpack-dev-server@2.9.4 --save-dev
然后修改package.json
css打包
在./src/css/index.css 简历index.css文件
body{
background-color:#f00;
color:#fff;
}
在entry.js引入css文件
import css from './css/index.css';
document.getElementById('title').innerHTML='Hello jason';
style-loader:
它是用来处理css文件中的url()等，npm中的网址：https://www.npmjs.com/package/style-loader
用npm install 进行项目安装：
npm install style-loader --save-dev
css-loader：
它是用来将css插入到页面的style标签。npm中的网址：https://www.npmjs.com/package/css-loader
用npm install 进行项目安装：
npm n install --save-dev css-loader
两个loader都下载安装好后，我们就可以配置我们loaders了。
修改webpack.config.js中module属性中的配置代码如下：
webpack.config.js
第一种:
module:{
rules: [
{
test: /.css$/,
use: [ 'style-loader', 'css-loader' ]
}
]
},
第二种:
module:{
rules: [
{
test: /.css$/,
loader: ['style-loader','css-loader']
}
]
},
第三种: 常用方式, 可以扩展
module:{
rules: [
{
test: /.css$/,
use: [{
loader: 'style-loader'
},{
loader: 'css-loader'
}]
}
]
},
JS压缩 (插件配置：配置JS压缩)
webpack.config.js 引入 uglify.js
const path = require('path');
const uglify = require('uglifyjs-webpack-plugin');
module.exports = {
entry:{
entry:'./src/entry.js',
entry2:'./src/entry2.js'
},
output:{
path: path.resolve(__dirname, 'dist'),
//filename:'bundle.js'
//[name] 自动匹配js名称
filename:'[name].js'
},
module:{
rules: [
{
test: /.css$/,
//use: ['style-loader','css-loader']
//loader: ['style-loader','css-loader']
use: [{
loader: 'style-loader'
},{
loader: 'css-loader'
}]
}
]
},
plugins:[
new uglify
],
//热更新 需要安装 webpack-dev-server2.9.4 对应 webpack3.6版本
//然后修改 package.json
/*
*"scripts": {
* "server": "webpack-dev-server"
*}
*/
devServer:{
//文件地址
contentBase: path.resolve(__dirname, 'dist'),
//IP
host: '174.16.10.160',
//文件压缩
compress: true,
//端口
port: 8008
}
}
然后webpack 打包 就可以看到js文件压缩了
Html 打包
1. 先安装html 打包压缩插件
介绍网址: https://www.npmjs.com/package/extract-text-webpack-plugin
npm install --save-dev html-webpack-plugin
2. 然后配置webpack.config.js文件, 先引入 html-webpack-plugin插件
const htmlPlugin = request('html-webpack-plugin');
3. 最后插件配置代码
const path = require('path');
//引入js打包插件
const uglify = require('uglifyjs-webpack-plugin');
//引入html打包插件
const htmlPlugin = require('html-webpack-plugin');
module.exports = {
entry:{
entry:'./src/entry.js',
entry2:'./src/entry2.js'
},
output:{
path: path.resolve(__dirname, 'dist'),
//filename:'bundle.js'
//[name] 自动匹配js名称
filename:'[name].js'
},
module:{
rules: [
{
test: /.css$/,
//use: ['style-loader','css-loader']
//loader: ['style-loader','css-loader']
use: [{
loader: 'style-loader'
},{
loader: 'css-loader'
}]
}
]
},
plugins:[
//new uglify,
new htmlPlugin({
minify: {
removeAttributeQuotes: true
},
hash: true,
template: './src/index.html'
})
],
//热更新 需要安装 webpack-dev-server2.9.4 对应 webpack3.6版本
//然后修改 package.json
/*
*"scripts": {
* "server": "webpack-dev-server"
*}
*/
devServer:{
//文件地址
contentBase: path.resolve(__dirname, 'dist'),
//IP
host: '174.16.10.160',
//文件压缩
compress: true,
//端口
port: 8008
}
}
- minify：是对html文件进行压缩，removeAttrubuteQuotes是却掉属性的双引号。
- hash：为了开发中js有缓存效果，所以加入hash，这样可以有效避免缓存JS。
- template：是要打包的html模版路径和文件名称。
上边的都配置完成后，我们就可以在终端中使用webpack，进行打包。你会看到index.html文件已经被打包到我们的dist目录下了，并且自动为我们引入了路口的JS文件。
总结：
html文件的打包可以有效的区分开发目录和生产目录，在webpack的配置中也要搞清楚哪些配置用于生产环境，哪些配置用于开发环境，避免两种环境的配置冲突。