写在前面：无论学习vue还是学习react 都是需要适当了解webpack，这样才能用的更灵活。 Webpack 是一个 CommonJs & AMD 模块打包器。 也就是他是可以使用common.js 语法的。 个人的理解：就是通过一些JS模板去组件化一些页面，同时加载图片，CSS，JS 执行合并压缩插入，很强大。（例如我们组件化了头部和尾部，然后我们去每个模板页面去插入这个头部和尾部的组件，达到复用的效果。我现在也是一个小白，不知道说的对不对，大神见笑了。）写博客笔记，一是梳理下思路，二是自己不会用时也方便查找。 =。= 尤雨溪，尤大的推荐vue学习路线。 好了不扯没用的，看简单的安装吧。
开始之前附上webpack官网，开始工作确认你安装了node, 命令行 node -v npm-v 执行会出现版本号。
1.在你想要安装demo的地方安装一个文件夹，首先第一步初始化文件夹，执行操作 npm init，该命令会生成一个package.json.
2.第二步执行
npm install webpack --save-dev.
安装webpack。
3. 执行代码
npm install css-loader --save-dev npm install style-loader --save-dev
（一个是处理CSS 的，另一个处理引入style 里面。require('style-loader!css-laoder!./style.css') 是这个样子写的，安装完成之后还需要进行设置 ）
4.命令行执行 mkdir src mkdir dist 创建俩个新的文件夹（或者自己在编辑器进行创建。）
src 分建下属引用script 文件夹 ，放置JS的。 style文件夹放置css的,dist 文件夹下一般放置我们生产出来之后的文件。src作为我们的引用源文件，里面是可以放置各种资源组件的。到时候可以再去划分目录。
5.新建一个 空的webpack.config.js 这个是webpack 的配置文件。
6.package.json 里面处理webpack配置命令"webpack": "webpack --config webpack.config.js --progress --display-modules --colors --display-reasons"过程，模块，打包的原因，打包的字是彩色的。然后我们只需要在 npm run webpack 就可以执行我们定义好的文件。
{
"name": "webpack-test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"babel": {
"presets": [
"latest"
]
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"webpack": "webpack --config webpack.config.js --progress --display-modules --colors --display-reasons"
},
"author": "",
"license": "ISC",
"devDependencies": {
"autoprefixer": "^6.7.7",
"babel-cli": "^6.24.0",
"babel-core": "^6.24.0",
"babel-loader": "^6.4.0",
"babel-preset-latest": "^6.24.0",
"css-loader": "^0.27.3",
"ejs-loader": "^0.3.0",
"file-loader": "^0.10.1",
"html-loader": "^0.4.5",
"html-webpack-plugin": "^2.28.0",
"image-webpack-loader": "^3.2.0",
"less": "^2.7.2",
"less-loader": "^3.0.0",
"post-loader": "^1.0.0",
"style-loader": "^0.14.0",
"url-loader": "^0.5.8",
"webpack": "^2.2.1"
}
}
这个是配置文件 package.json 我在进行测试的时候安装的大概配置。自己经过测试都是跑的通的。
7.安装html-webpack-plugin
npm install html-webpack-plugin --save-dev
安装这条命令，安装完成之后在webpack.config.js 里面进行配置，
var htmlWebpackPlugin =require('html-webpack-plugin'); 支持这个插件
html-webpack-plugin 的用处。它会自动帮你生成一个 html 文件，并且引用相关的 assets 文件(如 css, js)。
8.想用es6 语法 好的 安装babel-。=
npm install -save-dev babel-loader
npm install -save-dev babel-core
oader 就是处理各种资源文件的插件，处理对应的文件应该使用对应的文件。在当前的文件夹下安装babel
npm install --save-dev babel-cli babel-preset-latest
9.var path =require('path'); 同样是在webpack.config.js 这个配置文件里面，这样就方便处理你的路径了。
10.post-loader 给CSS 添加前缀
npm install post-loader --save-dev
npm install autoprefixer --save-dev
11. 想用less吗，那就按吧
npm install less --save-dev
npm install less-loader --save-dev
sass同理。
12. postcss-loader 下面网址有postcss loader的安装方法，
https://www.npmjs.com/package/postcss-loader
13. html-loader 这个loader是处理html模板的
npm install html-loader --save-dev
14. 处理ejs模板
npm install ejs-loader --save-dev
15.安装img的图片加载loader
npm install file-loader --save-dev
16.安装img的图片加载loader
npm install file-loader --save-dev
17.安装url loader 当图片小于这个值得时候自动转换为Bash64编码
npm install url-loader --save-dev
18. 处理图片压缩的loader
npm install image-webpack-loader --save-dev
综上整个一个安装插件全集。但是安装完还是需要在配置文件中进行引用， 贴出webpack.config.js 的配置代码
var htmlWebpackPlugin =require('html-webpack-plugin');
var path =require('path');
module.exports={
// 表示我们说打包的入口哪个文件夹引入
entry:'./src/components/app.js',
// 表示我们的输入文件
output:{
// 定义输出目录
path:'./dist',
// 定义输出文件的名字,我们这里定义文件名加上hash值
filename:'js/[name]-[hash].js',
// 如果是线上地址就加上这个
// publicPath:'http://cdn.com/',
},
module:{
loaders:[
{
test:/\.js$/,
loader:'babel-loader',
// 只打包文件的位置
include:path.resolve(__dirname,'src'),
// 排除打包范围
exclude:path.resolve(__dirname,'node_modules'),
},
{
test:/\.css$/,
// postcss-loader给浏览器加前缀的插件
loader: 'style-loader!css-loader!postcss-loader',
options: {
plugins: function () {
return [
require('autoprefixer')
];
}
}
},
{
test:/\.less$/,
loader: 'style-loader!css-loader!less-loader',
},
{
test:/\.html$/,
loader:'html-loader'
},
{
test:/\.ejs$/,
loader:'ejs-loader'
},
{
// 不区分大小写$/i
test:/\.(png|jpg|gif|svg)$/i,
//当图片大致小于20k的时候不会执行压缩
loaders:[
'url-loader?limit=20000&name=image/[name]-[hash:5].[ext]',
'image-webpack-loader'
]
}
]
},
plugins:[
new htmlWebpackPlugin({
// 表示模板
template:'index.html',
filename:'index-[hash].html',
// 把我们的脚本放在头部
inject:'body',
title:'webpack is good',
minify:{
// 删除注释
removeComments:true,
// 去掉空格压缩
collapseWhitespace:true
}
})
]
}
这个包涵了 处理 img js css less 模板文件 ，算是webpack的基本配置了吧-。=
另外附上整个demo项目的文件，地址如下: https://github.com/hoyong6/webpack-test