目录
一、webpack安装、配置
二、项目打包流程
三、用过的插件记录
一、webpack安装
1.安装node.js(其自带软件管理包 npm)
node.js官网:node.js
npm(在这可查很多有用的API):npm
webpack官网(英文网):webpack
2.安装webpack
打开命令行(window下:运行-cmd),
键入:npm install webpack -g
二、项目打包流程
1.进入项目目录()(window下:cd xxx/xxx/xxx)
2.打开命令行,
①键入(必须在项目根目录进行):npm init
创建package.json文件(若有了则跳过)
②查看webpack版本信息:npm info webpack
③安装webpack:npm install webpack --save-dev
(感觉在第一步做过了,预防万一,再安装一次)
④在项目根目录创建 webpack.config.js 配置文件,此文件是整个打包的核心
(如果想要放进已有的配置文件,命令行中键入webpack --config 文件名
)
⑤创建静态资源文件夹dist,此文件夹用于放置打包后的文件(项目根目录?)
3.webpack.config.js 文件的配置
基本的入口出口:
module.exports ={
entry: 'a.js',
output:{
filename:'new.js',
path:'./dist/js'
}
module:{
loaders:[{},{}]
}
plugins:[]
}
其中entry是文件入口的意思,它可以有三种配置方式:
/*第一种,单一文件*/
entry: "a.js"
/*第二种,多个js文件打包为同一个文件*/
entry:["a.js","b.js"]
/*第三种,打包为几个不同的文件(传入对象)*/
entry: {
main : "a.js",
other : ["b.js","c.js"]
}
output(出口)的简单介绍:
filename: "xx.js"
//输出文件名,可以输出带有路径的:
filename: "./dist/js/xxx.js"
//若要输出多个文件,可插入[name]、[hash]等:
filename:"./dist/js/[name].js" //此时根据entry对象的命名生成文件名
----------
path: ""
//文件输出的路径、这个参数有点诡异 ——dirname?
publicpath:""
//待弄懂
----------
module常用法:
module: {
loaders: [
{
test: /\.css$/,
loaders: ['style-loader', 'css-loader']
//处理css文件用的loader,需要在命令行里安装插件
//npm install style-loader css-loader --save-dev
}
, {
test: /\.(gif|jpg|png|woff|svg|eot|ttf)\??.*$/,
loader: ['url-loader?limit=8192&name=../dist/img/[name].[ext]']
//处理图片、字体文件用的loader,需要在命令行里安装插件
//npm install url-loader --save-dev
}
]
}
插件plugins(这里仅写 html-webpack-plugin 插件,此插件用語html的交互)
首先,要在webpack.config.js 的头部建立
var htmlWebpackPlugin = require('html-webpack-plugin');
同时,要在命令行安装插件
npm install html-webpack-plugin --save-dev
plugins: [
new htmlWebpackPlugin({
template: './html/index.html',
//这个的意思是模板文件,可带有路径
filename: './index-[hash].html',
//根据模板创立的filename,带有输出路径
inject: 'head',
//打包后的js(css)文件放哪,可选'head'/'body'/false(不插入)
chunks: ['main', 'other'],
//分支,若有多个输出,可在此处选择插入哪些文件
minify:{
collapseWhitespace:true,
removeComments:true
}
//压缩 collapseWhitespace 意思的移除空格
//removeComments 意思是移除注释
})]
4.确定打包
三种方法
①:命令行里输入
webpack --config webpack.config.js --progress --display-modules --color --display-reasons
//--xxx,控制显示具体步骤
②:也可以直接命令行高输入webpack
这是快捷方式
③:不过通常做法是,修改package.json文件的scripts
//原始的
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
}
//添加快捷方式
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"webpack": "webpack --config webpack.config.js --progress --display-modules --color --display-reasons"
}
//之后只要在命令行
`npm run webpack`
即可配置文件进行压缩