社区微信群开通啦,扫一扫抢先加入社区官方微信群
社区微信群
"devDependencies": {
"css-loader": "^1.0.0",
"extract-text-webpack-plugin": "^3.0.2",
"file-loader": "^2.0.0",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"style-loader": "^0.23.0",
"url-loader": "^1.1.1",
"webpack": "^3.0.1",
"webpack-cli": "^3.1.1",
"webpack-dev-server": "^2.11.3"
},
"dependencies": {}
前期知识准备
1、webpack配置文件配置选项说明:
entry:js的入口文件;
externals:外部依赖的声明;
output:目标文件;
resolve:配置别名;
module:各种文件、别名;
plugins:插件。
2、webpack基本loader:
html:html-webpack-plugin/html-loader;
js:babel-loader;
css:style-loader、css-loader;
img/font:url-loader、file-loader。
3、webpack常用命令:
webpack:以不压缩代码的形式打包;
webpack -p:以不压缩的方式打包代码,常用于线上发布;
webpack --watch:用于监听文件的改变,用于开发过程;
webpack --config webpack.conf.js:通过 --config 参数来改变配置文件位置。
4、webpack-dev-server:
现在开始搭建我们的项目
说明:前提是我们已经安装了node、npm,同时npm已经改为cnpm淘宝镜像,查看linkwebpack官方文档
1、创建项目的git仓库,并远程连接到本地;
2、创建项目目录;
3、进入项目根目录:
全局安装webpack:npm install webpack -g
项目中安装webpack:npm install webpack --save-dev
3.配置入口文件:
const path = require('path');
module.exports = {
entry: './src/page/index/index.js',
output: {
path: './dist',
filename: 'app.bundle.js'
}
}
/**
* entry: './src/page/index/index.js' 是
* entry: {
* main: './src/page/index/index.js'
* }
* 的简写形式。
* 当向entry 传入一个文件路径数组时,将创建多个入口
**/
module.exports = {
entry: {
index: ['./src/page/index/index.js'],
login: ['./src/page/login/login.js']
},
output: {
path: path.resolve(__dirname,'./dist'),
filename: 'js/[name].js'
}
}
//同时配置output 单独打包
4. 外部依赖声明jquery
首先在html页面引入jquery文件,在js文件中引入jquery模块 var $ = require('jquery');
module.exports = {
//省略部分代码
externals: {
'jquery': 'window.jQuery'
}
}
5.将通用模块打包到一个文件中
当我们在page/index/index.js和page/login/index.js同时引用page/common/index.js时会将common/index.js中的公共模块打包到dist/js/base.js中
//引入webpack
const webpack = require('webpack');
module.exports = {
//省略部分代码
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: 'common',
filename: 'js/base.js'
})
]
}
为了避免在每个文件中都要写require('...')的方式引用,我们在page 文件夹下创建common/index.js文件,将以后所有的公共模块放在其中。接着在入口文件中定义这个入口common ,并在plugins的webpack.optimize.CommonsChunkPlugin 中配置参数将所有的通用模块打包到dist/js/base.js中。之后只要在html页面引入base.js公共模块文件就可以了。
module.exports = {
entry: {
common: ['./src/page/common/index.js'],
//省略部分代码
},
...
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: 'common', //这里的common 和entry中的 common互相关联
filename: 'js/base.js'
})
]
}
6.打包css文件
我们在page/index文件夹下为view/index.html文件创建index.css文件并写入样式,接着在page/index.js中引入index.js文件(在index.js中写入require('./index.css');)。最后为css文件配置loader,记得npm安装loader:
nodule.exports = {
entry: {...},
//省略部分代码
module: {
loaders: [
{
test: /.css$/,
loader: 'style-loader!css-loader'
}
]
}
}
7.css文件单独打包
如果我们使用第6条(6.打包css文件)的方会将css文件打包到dist/js/base.js文件中,这样会导致页面一开始没有加载到js文件导致页面没有加载样式文件造成空白样式页面。所以我们应该将css单独打包,通过link标签引入页面。这里我们使用extract-text-webpack-plugin插件,首先npm安装此插件
//引入extract-text-webpack-plugin插件
const ExtractTextPlugin = require('extract-text-webpack-plugin');
//重写我们上一步写的loader
module.exports = {
entry: {...},
//省略部分代码
module: {
rules: [
{
test: /.css$/,
loader: ExtractTextPlugin.extract('style-loader', 'css-loader')
}
]
},
plugins: [
//省略部分代码
new ExtractTextPlugin('css/[name].css') //将css文件单独打包到dist/css/文件夹下
]
}
8.html文件打包
打包html文件需要使用 html-webpack-plugin 插件,首先npm安装此插件,然后在webpack.config.js添加配置:
//引入html-webpack-plugin 插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
//省略部分代码
plugins: [
//添加
new HtmlWebpackPlugin({
template: './src/view/index.html', //指定要打包的Html文件
filename: 'view/index.html', //将文件打包到dist/view/index.html文件
inject: true, //true表示将css文件插入到head标签中,将js文件插入到body标签底部
hash: true, //true表示将唯一的webpack编译哈希添加到所有包含css、js文件中,对缓存崩溃有用
chunks: ['common','index'] //需要打包到HTML文件中的模块,这里是指入口文件定义的 common 和 index 模块。
})
]
}
配置完成后我们就不需要在view/index.html中引入样式文件和base.js、index.js文件了,webpack会按照我们配置自动将样式文件和脚本文件自动打包到HTML文件中。
上面的配置只是解决了单个html页面的打包问题,假设我们有多个页面那我们就需要将HtmlWebpackPlugin 的参数封装成一个方法:
//创建生成配置HtmlWebpackPlugin 参数的方法,参数name 是需要打包的html文件名
function getHtmlConfig (name) {
return {
template: './src/view/' + name + '.html',
filename: 'view/' + name + '.html',
inject: true,
hash: true,
chunks: ['common', name]
}
}
module.exports = {
//省略部分代码
plugins: [
new HtmlWebpackPlugin(getHtmlConfig('index')),
new HtmlWebpackPlugin(getHtmlConfig('login')),
...
]
}
9.利用html-webpack-plugin 提供的EJS模板语法
我们可以利用EJS模板语法将通用的html元素提取成一个组件,在哪里使用就在哪里引入。EJS模板引入需要安装html-loader ,然后在需要引入的地方使用模板语法引入:
<%=require('html-loader!需要引入的模板路径') %>
10.图片和字体文件的打包
图片和字体的打包依赖于url-loader和file-loader,首先npm安装这两个loader,接着来配置rules:
module.exports = {
entry: {...},
//省略部分代码
module: {
rules: [
//添加规则
{
test: /.(png|svg|jpg|gif|jpeg|ttf|eot|woff)??.*$/,
loader: 'url-loader?limit=128&name=resource/[name].[ext]'
}
]
}
}
11.使用webpack-dev-server 开启本地服务器,为项目配置热加载模式(HMR)
安装此插件后,首先要配置环境变量,确定我们的项目在开发环境下还是生产环境:
//在webpack.config.js文件中配置
//声明环境变量 NODE_ENV,默认情况为开发环境
var NODE_ENV = process.env.WEBPACK_ENV || 'dev';
var config = {
entry: {
'common': ['./src/page/common/index.js'],
'index': ['./src/page/index/index.js'],
'login': ['./src/page/login/index.js']
}
//省略部分代码
}
//如果是环境变量是开发模式就启用webpack-dev-server提供的本地服务器启动我们的项目,如果不是就不启动了
if(NODE_ENV === 'dev'){
config.entry.common.push('webpack-dev-server/client?http://localhost:8000/');
}
module.exports = config;
配置静态资源加载路径publicPath,使打包后文件可以正确访问到静态资源:
//在这里我们为打包后的文件设置publicPath参数为访问静态资源的正确路径为打包后的路径
var config = {
//省略部分代码
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'js/[name].js',
publicPath: '/dist/'
},
}
配置npm启动项,更方便我们调试打包
//在package.json文件的 "scripts" 里添加下面代码,当我们使用 npm run build 和 npm run dev 就会分别执行不同配置的 webpack 操作
// --inline 参数就是启动了webpack-dev-server的HMR(热加载);-p 是最大化压缩代码,这里我们用到了生产环境中;--port 是指定了我们启动服务器的端口号; "set &&" 是在window操作系统下必需要添加的字段
"scripts": {
"build": "set NODE_ENV=production && webpack -p",
"dev": "set NODE_ENV=dev && webpack-dev-server --inline --port 8088"
},
推荐advance100的博文webpack从零配置和Dabao123的博文webpack-dev-server核心概念
如果觉得我的文章对您有用,请随意打赏。你的支持将鼓励我继续创作!