前提
全局环境下安装 nodejs
使用
1、安装依赖包
如果项目没有npm管理，即没有package.json文件
初始化项目为nodejs项目
npm init
- 输入必要信息
- 生成package.json文件
安装webpack依赖
cnpm install webpack --save -dev
- –save：表示在安装的同时，将依赖包写入package.json中
- -dev:表示将依赖写在devDependency（开发依赖包）中
安装Loader，style，css，svg，url，file，font-awesome以及postCss
cnpm install style-loader css-loader svg-url-loader url-loader file-loader font-awesome-webpack postcss-webpack --save -dev
- style-loader :处理位于页面内的style标签中的css
- css-loader ：处理css文件中的url（这种写法是为了将css与js分开打包，利用插件ExtractTextPlugin）
{
test: /\.css$/,
loader: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
},
- svg-url-loader ：svg图片处理
{
test: /\.(svg|eot|woff|ttf)\w*/,
loader: 'file-loader?outputPath=fonts/&name=[name].[ext]'
},
- url-loader ：
1.文件大小小于limit参数，url-loader将会把文件转为DataURL；
2.文件大小大于limit，url-loader会调用file-loader进行处理，参数也会直接传给file-loader。有参数
{
test: /\.(png|jpg|gif)$/,
loader: 'url-loader?limit=8192&name=css/images/[name].[ext]'
},
- file-loader ：解析项目中的url引入（不仅限于css），根据我们的配置，将图片拷贝到相应的路径，再根据我们的配置，修改打包后文件引用路径，使之指向正确的文件。有参数
{
test: /\.xsl$/,
loader: "file-loader?name=[name].[ext]"
}
- url-loader和file-loader涉及到了4个参数：limit、name、outputPath、publicPath。
- 其中limit已经说明过，告诉url-loader，在文件小于多少个字节时，将文件编码并返回DataURL。
- file-loader相关的是name、outputPath和publicPath。下面解释一下这3个参数
- name表示输出的文件名规则，如果不添加这个参数，输出的就是默认值：文件哈希。
- 加上[path]表示输出文件的相对路径与当前文件相对路径相同，加上[name].[ext]则表示输出文件的名字和扩展名与当前相同。
- 加上[path]这个参数后，打包后文件中引用文件的路径也会加上这个相对路径。
- outputPath表示输出文件路径前缀。
- 图片经过url-loader打包都会打包到指定的输出文件夹下。
- 但是我们可以指定图片在输出文件夹下的路径。
- 比如outputPath=img/，图片被打包时，就会在输出文件夹下新建（如果没有）一个名为img的文件夹，把图片放到里
- publicPath表示打包文件中引用文件的路径前缀
- 如果你的图片存放在CDN上，那么你上线时可以加上这个参数，值为CDN地址，这样就可以让项目上线后的资源引用路径指向CDN了。
- font-awesome-webpack :处理字体文件
- postcss-webpack
- extract-text-webpack-plugin ：将css与js分开打包
- clean-webpack-plugin ：在打包前清空目标文件夹
- copy-webpack-plugin ：直接复制文件或文件夹到目标目录
如果项目已经被npm管理，即包含package.json文件
直接安装所有依赖
cnpm install
2、配置文件 webpack.config.js
- 首先新建入口文件 index.js
引入各种需要的js和css等文件
require('./js/lib/jquery/jquery.js');
require('./js/lib/jquery/jquery-1.9.1.min.js');
require('./js/lib/jquery/jquery.colorbox.js');
require('./js/common/common.js');
require('./js/main.js');
require('./js/carousel.js');
// require('./js/MathJax/MathJax.js?config=TeX-AMS-MML_HTMLorMML');
require('./css/iconfont.css');
require('./css/colorbox.css');
require('./css/by.css');
require('./css/jo-dhh.css');
require('./xslt/jats2html.xsl');
- 引入webpack包
var webpack = require("webpack");
- 设置打包入口，和输出路径、文件名称
__dirname为当前目录
entry: {
index: __dirname + "/index.js",
// vendor:['jQuery'],
},
output: {
path: __dirname + "/dist",
//打包后的文件存放的地方
filename: "bundle.js"
},
- 为了将js与css分开打包，需要引入插件extract-text-webpack-plugin
var ExtractTextPlugin = require("extract-text-webpack-plugin");
在module中的loader参数中，对css的处理部分修改为
{
test: /\.css$/,
loader: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
},
在plugins中添加css文件打包后的输出路径和文件名
new ExtractTextPlugin("style.css")
说明：这里如果不将参数格式显示设置为fallback，use格式，后面在打包时会报css文件错误
- 对图片进行处理
图片有三种处理方式，一种图片是在css中被设置为背景样式，这里可以直接识别并放入目标文件夹；
{
test: /\.(png|jpg|gif)$/,
loader: 'file-loader?name=images/[name].[ext]'
},
另一种是在html中通过img标签的src引入，因为webpack对html支持不友好，所以需要借助插件html-webpack-plugin
第三种是借用拷贝插件，直接强行拷贝所有图片，因为本项目图片是在xslt中引用，所以采用第三种和第一种结合的方式处理图片，在plugin参数中添加
new CopyWebpackPlugin([
{
from: 'css/images',
to: 'images'
},
{
from: 'xmlsample',
to: 'xmlsample'
},
{
from: 'js/MathJax',
to: 'MathJax'
}
]),
- 对字体文件处理
这里需要注意：字体文件的css样式和其余资源文件的路径对应问题
如果css是与其余的css一起打包，那么其中对fonts资源的引用路径也会自动发生变化，一定注意，是个大坑！！
{
test: /\.(svg|eot|woff|ttf)\w*/,
loader: 'file-loader?outputPath=fonts/&name=[name].[ext]'
},
- 其余格式文件处理，项目主要是利用xslt对xml进行转换，所以需要将xslt也进行处理
{
test: /\.xsl$/,
loader: "file-loader?name=[name].[ext]"
}
- 因为涉及到多个文件打包成一个文件，所以开启source-map映射，方便调试，发布版本可以关闭该功能
devtool: 'source-map',
- 拷贝其余文件
var CopyWebpackPlugin = require("copy-webpack-plugin");
new CopyWebpackPlugin([
{
from: 'css/images',
to: 'images'
},
{
from: 'xmlsample',
to: 'xmlsample'
},
{
from: 'js/MathJax',
to: 'MathJax'
}
]),
- 因为每次打包结果可能都不一样，所以每次打包之前需要手动删除dist文件夹，不太方便，在网上找到一款可以自动删除目标文件夹的插件
懒惰才是最大生产力哈哈哈
var CleanWebpackPlugin = require("clean-webpack-plugin");
new CleanWebpackPlugin(
['dist'],
{
root: __dirname, //根目录
verbose: true, //开启在控制台输出信息
dry: false //启用删除文件
})
- 配置文件代码
var webpack = require("webpack");
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var CopyWebpackPlugin = require("copy-webpack-plugin");
var CleanWebpackPlugin = require("clean-webpack-plugin");
module.exports = {
entry: {
index: __dirname + "/index.js",
// vendor:['jQuery'],
},
output: {
path: __dirname + "/dist",
//打包后的文件存放的地方
filename: "bundle.js"
},
module: {
loaders: [
{
test: /\.css$/,
loader: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
},
// [hash:8]
// {
// test: /\.(png|jpg|gif)$/,
// loader: 'url-loader?limit=8192&name=css/images/[name].[ext]'
// },
{
test: /\.(png|jpg|gif)$/,
loader: 'file-loader?name=images/[name].[ext]'
},
{
test: /\.(svg|eot|woff|ttf)\w*/,
loader: 'file-loader?outputPath=fonts/&name=[name].[ext]'
},
{
test: /\.xsl$/,
loader: "file-loader?name=[name].[ext]"
}
]
},
devtool: 'source-map',
plugins: [
new ExtractTextPlugin("style.css"),
// new webpack.optimize.CommonsChunkPlugin({
// names: ['vendor', 'manifest'],
// }),
new CopyWebpackPlugin([
{
from: 'css/images',
to: 'images'
},
{
from: 'xmlsample',
to: 'xmlsample'
},
{
from: 'js/MathJax',
to: 'MathJax'
}
]),
new CleanWebpackPlugin(
['dist'],
{
root: __dirname, //根目录
verbose: true, //开启在控制台输出信息
dry: false //启用删除文件
})
]
}
网友评论