http://blog.csdn.net/weizengxun/article/details/53448885
第一课，npm install --save-dev webpack //保存到我们的开发环境(dev)
1,如果安装的时候报红错误，（1，看一下node版本是不是太低node -v 2,网络问题《可以用cnpm-------npm.taobao.org淘宝镜像安装》3，权限问题 ）
2，如果webpack太老，然后可以把node_modules文件夹删除了，然后重新装一次，npm install --save-dev webpack
如果项目有很多依赖包了，那么先打开packgage.json，把webpack的版本号改了保存，然后再把node_modules文件夹删除了再重新装一次
第二课，快速上手一个demo:
1，webpack 这里是编写的js文件路径+空格+这里是要编译的文件路径
2，可以安装一个live-server来实时刷新查看结果（npm install -g live-server）--live-server执行
第三课，入口和出口
webpack.config.js文件内容
const path=require('path'); //绝对路径
module.exports={
entry:{
entry:'./'，
entry2:'' //可以多文件入口和出口
},//入口文件地址
output:{
path:path.resolve(_dirname,'打包文件的父级名'),
filename:'打包的文件名.js'
} //出口文件打包压缩后的文件
module:{
rules:[
{
test:/\.css$/,
use:['style-loader','css-loader']
}
]
}//这里是编译的，less,图片之类
plugins:[] //这里就是插件可以有多个
devServer:{
contentBase:path.resolve(__dirname,'dist'),
host:'Ip地址' //不建议写loacalhost有时映射不到
compress:true, //服务器端压缩
port:1717 //端口号
} //配置开发服务
}
//查ip 地址 ipconfig
第四课，服务和热更新
首页得配置webpack.config.js里的devServer项参考三
安装 npm install webpack-dev-server --save-dev
(--save-dev只在开发中使用)
命令是安装到node_modules所以终端是找不到的，所以得在webpack.config.js里更改配置
“scripts”:{
'server':'webpack-dev-server'
}
执行用npm run server
第五课，打包css文件--loaders
在module里配置 ，参考三
1，建议css文件目录,在js文件里引入css
import css from './css/index.css' （这里的路径要是相对路径)
2,需要安装两个css (style-loader, css-loader)
npm install style-loader --save-dev (路径的处理)
npm install css-loader --save-dev （样式标签的处理）
3，安装好就可以在webpack.config.js里配置modul,参考三
module:{
rules:[
{
test:/\.css$/,
use:['style-loader','css-loader'] 或
loader:['style-loader','css-loader'],
use:[
{loader:"style-loader"},
{loader:"css-loader"}
]
}
]
}
再启动服务 npm run server
第六课，js代码压缩
引入一个插件uglify
1,在webpack.config.js里引入const uglifyaaa=require('uglifyjs-webpack-plugin');
2,在plugins:[
new uglifyaaa();
]
第七课，HTML文件的打包
1,在webpack.config.js里引入const htmlPlugin=require('html-webpack-plugin');
2,安装npm install --save-dev html-webpack-plugin
3,在plugins:[
new htmlPlugin({
minify:{ // minify压缩
removeAttributeQuotes:true //去掉属性，把属性引号去掉了
},
hash:true, //防止缓存，一般引入js会产生缓存，这样就不会有缓存了
template:'./src/index.html' //模板打包成的样式和路径
});
]
第八课，css中引用图片
1，安装组件file-loader url-loader
npm install --save-dev file-loader url-loader
2,webpack.config.js里配置module
module:{
rules:[
{
test:/\.css$/,
use:['style-loader','css-loader']
},{
test:/\.(png|jpg|gif)/ ,
use:[{
loader:'url-loader',
options:{
limit:500000,
outputPath:'images/' //(打包出图片在images文件夹里)
}
}]
}
]
}
第九课，CSS分离和publicPath
插件 Extract Text Plugin
1,先安装分离插件
npm install --save-dev extract-text-webpack-plugin(注意多加一个webpack)
2,webpack.config.js 中引入
const extractTextPlugin=require('extract-text-webpack-plugin')
3,在下面plugins里new extractTextPlugin(打包的路径)
new extractTextPlugin("/css/index.css")
4，这种打包分离需要解决的路径问题，给一个公用publicPath路径，要在输出output里面定义
var website={
publicPath:"http://http://192.168.1.104:1717/"
}
output:{
publicPath:website.publicPath
}
第十课，HTML中的图片打包 安装loader
npm inatall --save-dev html-withimg-loader
webpack.config.js里写配置
test:/\.(htm|html)$/i,
use:['html-withimg-loader']
第十一课，打包和分离LESS
1,首页装less （npm install --save-dev less）
2,安装less-loader(npm install --save-dev less-loader)
3.webpack.config.js配置文件
{
test: /\.less$/,
use: [{
loader: "style-loader" // creates style nodes from JS strings
}, {
loader: "css-loader" // translates CSS into CommonJS
, {
loader: "less-loader" // compiles Less to CSS
}]
}
引入到我们entery.js文件中
import less from './css/black.less';
4，把Lees文件分离。
{
test: /\.less$/,
use: extractTextPlugin.extract({
use: [{
loader: "css-loader"
}, {
loader: "less-loader"
}],
// use style-loader in development
fallback: "style-loader"
})
}
第十二课,打包和分离SASS
npm install --save-dev node-sass
npm install --save-dev sass-loader
在js文件里引入scss文件
{
test: /\.scss$/,
use: [{
loader: "style-loader" // creates style nodes from JS strings
}, {
loader: "css-loader" // translates CSS into CommonJS
}, {
loader: "sass-loader" // compiles Sass to CSS
}]
}
把SASS文件分离。
{
test: /\.scss$/,
use: extractTextPlugin.extract({
use: [{
loader: "css-loader"
}, {
loader: "sass-loader"
}],
// use style-loader in development
fallback: "style-loader"
})
}
第十三课，postcss自动添加CSS属性前缀
https://github.com/postcss/postcss-loader
1,需要安装两个包postcss-loader 和autoprefixer（自动添加前缀的插件）
npm install --save-dev postcss-loader autoprefixer
2,postCSS推荐在项目根目录（和webpack.config.js同级），建立一个postcss.config.js文件。
3,postcss.config.js :
module.exports = {
plugins: [
require('autoprefixer')
]
}
4,对postcss.config.js配置完成后，我们还需要编写我们的loader配置。
{
test: /\.css$/,
use: [
{
loader: "style-loader"
}, {
loader: "css-loader",
options: {
modules: true
}
}, {
loader: "postcss-loader"
}
]
}
5,配置提取CSS的loader配置.
{
test: /\.css$/,
use: extractTextPlugin.extract({
fallback: 'style-loader',
use: [
{ loader: 'css-loader', options: { importLoaders: 1 } },
'postcss-loader'
]
})
}
第十四课，消除无用的CSS
（i=>install）
(-D => --save-dev)
1,npm i -D purifycss-webpack purify-css
2,因为我们需要同步检查html模板，所以我们需要引入node的glob对象使用。在webpack.config.js文件头部引入glob。 const glob = require('glob');
3,引入purifycss-webpack (const PurifyCSSPlugin = require("purifycss-webpack");)
4,
plugins:[
......
new extractTextPlugin("css/index.css"),
new PurifyCSSPlugin({
paths: glob.sync(path.join(__dirname, 'src/*.html')),
})
]
第十五课，Babel转换ES6
给webpack增加babel支持（以下说明转自技术胖）
Babel的安装与配置
Babel其实是几个模块化的包，其核心功能位于称为babel-core的npm包中，webpack可以把其不同的包整合在一起使用，对于每一个你需要的功能或拓展，你都需要安装单独的包（用得最多的是解析ES6的babel-preset-es2015包和解析JSX的babel-preset-react包）。
1，cnpm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react
2，在webpack中配置Babel的方法如下：
{
test:/\.(jsx|js)$/,
use:{
loader:'babel-loader',
options:{
presets:[
"es2015","react"
]
}
},
exclude:/node_modules/
}
3，.babelrc配置
虽然Babel可以直接在webpack.config.js中进行配置，但是考虑到babel具有非常多的配置选项，如果卸载webapck.config.js中会非常的雍长不可阅读，所以我们经常把配置卸载.babelrc文件里。
在项目根目录新建.babelrc文件，并把配置写到文件里。
{
"presets":["react","es2015"]
}
4，ENV：
现在网络上已经不流行babel-preset-es2015，现在官方推荐使用的是babel-preset-env,那我们为了紧跟潮流，我们在讲一下env的配置方法。
npm install --save-devv babel-preset-env
5，然后修改.babelrc里的配置文件。其实只要把之前的es2015换成env就可以了。
{
"presets":["react","env"]
}
第十六课，转自jspang
在配置devtool时，webpack给我们提供了四种选项。
source-map:在一个单独文件中产生一个完整且功能完全的文件。这个文件具有最好的source map,但是它会减慢打包速度；
cheap-module-source-map:在一个单独的文件中产生一个不带列映射的map，不带列映射提高了打包速度，但是也使得浏览器开发者工具只能对应到具体的行，不能对应到具体的列（符号）,会对调试造成不便。
eval-source-map:使用eval打包源文件模块，在同一个文件中生产干净的完整版的sourcemap，但是对打包后输出的JS文件的执行具有性能和安全的隐患。在开发阶段这是一个非常好的选项，在生产阶段则一定要不开启这个选项。
cheap-module-eval-source-map:这是在打包文件时最快的生产source map的方法，生产的 Source map 会和打包后的JavaScript文件同行显示，没有影射列，和eval-source-map选项具有相似的缺点。
四种打包模式，有上到下打包速度越来越快，不过同时也具有越来越多的负面作用，较快的打包速度的后果就是对执行和调试有一定的影响。
个人意见是，如果大型项目可以使用source-map，如果是中小型项目使用eval-source-map就完全可以应对，需要强调说明的是，source map只适用于开发阶段，上线前记得修改这些调试设置。
module.exports = {
devtool: 'eval-source-map',
entry: __dirname + "/app/main.js",
output: {
path: __dirname + "/public",
filename: "bundle.js"
}
}
第十七课，实战技巧：开发和生产并行设置
转自jspang
第一种，不推荐
安装完成后，你会发现在package.json中并不存在这个包的依赖。如果你项目拷贝给别人继续开发，或者别人和你git合作，再次下载项目npm install时就会缺少这个jquery包。项目就会无法正常运行，所以这也是我们最不赞成的安装方法。(npm install jquery)
第二种
安装完成后，它存在于package.json的dependencies中，也就是说它是生产环境需要依赖的包（上线时需要的以来包）（npm install jquery --save）
第三种
安装完成后，它存在于package.json的devDependencies中，也就是说它是开发环境中需要的，上线并不需要这个包的依赖。（npm install jquery --save-dev）
安装全部项目依赖包：npm install
安装生产环境依赖包：npm install --production
package.json 文件修改
"scripts": {
"server": "webpack-dev-server --open",
"dev":"set type=dev&webapck",
"build": "set type=build&webpack"
}
网友评论