1.安装

npm install webpack -g

npm install webpack -save-dev

2.编辑配置文件

// 引入 path
var path=require('path') module.exports = {
// 指定spa应用的入口文件
entry: path.resolve(__dirname, 'src/js/app.js'),
// 指定项目构建的输出位置
output: {
// 输出位置
path: path.resolve(__dirname, 'dist'),
// 文件名
filename: 'bundle.js',
}
}

3.运行

在项目根目录执行webpack可以启动默认配置文件webpack.config.js
运行指定配置文件执行webpack --config webpack.develop.config.js

把运行命令放到package.json文件中

启动命令还可以加很多参数webpack --config webpack.develop.config.js --progress --profile --colors
这么多参数不可能都记住,所以将启动命令写到package.json的script标签中

监听代码变化自动重新构建

代码的变动需要多次运行npm run develop所以我们需要自动监听代码变动,然后运行构建,于是我们用到了webpack-dev-server这个模块

(1)基本使用

a.下载npm install webpack-dev-server@9.9.9 -save-dev,注意选择2.x版本的模块
b.修改package.json文件中的命令webpack-dev-server --config webpack.develop.config.js --progress --profile --colors
c.修改开发配置文件

webpack2中推荐所有的服务配置信息都写到配置文件中的devServer属性中,不要写在package.json中
基本配置

devServer: {
// 指定启动服务的更目录
contentBase: __dirname + '/src',
// 指定端口号
port: 8080,
host: 'localhost',
// 以下信息可有可无,为了完整
inline: true,
historyApiFallback: true,
noInfo: false,
// stats: 'minimal',
// publicPath: publicPath
},

(2)热更新

可以不刷新浏览器更新
修改配置文件

devServer: {
// 指定启动服务的更目录
contentBase: __dirname + '/src',
// 指定端口号
port: 8080,
host: 'localhost',
// 启用热更新
hot: true,
// 以下信息可有可无,为了完整
inline: true,
historyApiFallback: true,
noInfo: false,
// stats: 'minimal',
// publicPath: publicPath
},

需要配合一个内置插件一起使用

var webpack=require('webpack')

plugins: [
new webpack.HotModuleReplacementPlugin(),
]

Loaders(加载器)
在真正构建之前做一些预处理操作就叫加载器
1.处理es6、es7、jsx语法加载器

npm install babel-loader --save-dev
npm install babel-core babel-preset-es2015 babel-preset-react -save-dev
npm install babel-preset-stage-0 babel-preset-stage-1 babel-preset-stage-2 babel-preset-stage-3 --save-dev
npm install babel-plugin-transform-runtime -save-dev这个插件的作用是支持es7特性

修改配置文件

module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: [
{
loader: "babel-loader"
}
]
}
]
}

创建.babelrc文件

{
"presets": [
"es2015",
"react",
"stage-0",
"stage-1",
"stage-2",
"stage-3"
],
"plugins": [
"transform-runtime"
]
}

2.处理css文件引用的加载器

npm install style-loader css-loader -save-dev

修改配置文件

// 处理在js中引用css文件
{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
},

3.处理scss或者less文件引用的加载器

npm install sass-loader less-loader node-sass -save-dev

修改配置文件

// 处理在js中引用scss文件
{
test: /\.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader'],
},
{
test: /\.less$/,
use: ['style-loader', 'css-loader', 'less-loader'],
},

4.处理图片引用的加载器

npm install url-loader file-loader -save-dev

修改配置文件

// 处理图片操作  25000bit ~3kb
{
test: /\.(png|jpg|jpeg|gif)$/,
use: 'url-loader'
},

5.处理字体文件引用的加载器

npm install url-loader file-loader -save-dev

修改配置文件

// 处理字体文件
{
test: /\.(eot|woff|ttf|woff2|svg)$/,
use: 'url-loader'
}

6.处理浏览器兼容前缀

npm install postcss-loader autoprefixer -save-dev

修改配置文件

{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallbackLoader: "style-loader",
loader: "css-loader!postcss-loader"
})
},
// 处理在js中引用scss文件
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallbackLoader: "style-loader",
loader: "css-loader!postcss-loader!sass-loader"
})
},
{
test: /\.less$/,
use: ExtractTextPlugin.extract({
fallbackLoader: "style-loader",
loader: "css-loader!postcss-loader!less-loader"
})
},

新建postcss.config.js

module.exports = {
plugins: [
require('autoprefixer')({browsers:'last 2 versions'})
]
}

7.处理统一风格管理

npm install eslint-loader -save-dev

修改配置文件

// 这个只是加载器部分的写法,具体使用请看eslint文档
{
enforce: "pre",
test: /\.js$/,
exclude: /node_modules/,
loader: "eslint-loader",
options:{
configFile:'.eslintrc.js'
}
},

8.处理vue文件

npm install vue-loader -save-dev

修改配置文件

{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
js: [
'babel-loader',
{
loader: "eslint-loader",
options: {
configFile: '.eslintrc.js'
}
}
],
css: 'style-loader!css-loader'
}
}
},

发布策略
简单的说就是将开发阶段的配置文件复制一份到部署的配置文件中,然后删删改改就可以了
把热更新插件删除,devServer属性删除
修改图片处理和字体处理加载器

// 处理图片操作  25000bit ~3kb
{
test: /\.(png|jpg|jpeg|gif)$/,
use: 'url-loader?limit=25000&name=images/[name].[ext]'
},
// 处理字体文件
{
test: /\.(eot|woff|ttf|woff2|svg)$/,
use: 'url-loader?limit=100000&name=fonts/[name].[ext]'
}

接下来运行npm run publish就发布了
不过要注意所有的css,js,图片都构建到一个bundle.js文件中了

Plugins(插件)
在真正构建之后做一些后处理操作就叫插件

1.删除插件

npm install clean-webpack-plugin -save-dev

使用

var CleanPlugin = require('clean-webpack-plugin');

plugins: [
// 删除文件夹的插件
new CleanPlugin(['dist'])
]

2.抽取公共js插件

使用

entry: {
app: path.resolve(__dirname, 'src/js/app.js'),
vendors: ['vue','vue-router','vuex']
}, plugins: [
// 分离第三方应用的插件
new webpack.optimize.CommonsChunkPlugin({name: 'vendors', filename: 'vendors.js'}),
]

3.提取样式文件插件

npm install extract-text-webpack-plugin@4.4.4 -save-dev注意下载2.x版本

使用

// 1、抽取css的第三方插件
var ExtractTextPlugin = require("extract-text-webpack-plugin"); // 2、处理在js中引用css文件
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallbackLoader: "style-loader",
loader: "css-loader"
})
},
// 处理在js中引用scss文件
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallbackLoader: "style-loader",
loader: "css-loader!sass-loader"
})
}, //3、加一个插件
plugins: [
// 删除文件夹的插件
new ExtractTextPlugin("app.css"),
]

4.自动生成html插件

npm install html-webpack-plugin -save-dev

在根目录创建template.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>webpack学习</title>
</head>
<body>
<div id="app"></div>
</body>
</html>

修改配置文件

var HtmlWebpackPlugin = require('html-webpack-plugin');

plugins: [
// 自动生成html插件
new HtmlWebpackPlugin({
template: './src/template.html',
htmlWebpackPlugin: {
"files": {
"css":["app.css"],
"js": ["vendors.js", "bundle.js"]
}
},
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
}
}),
]

5.压缩插件

修改配置文件

plugins: [
// 压缩混淆js代码插件
new webpack.optimize.UglifyJsPlugin({
beautify: false,
mangle: {
screw_ie8: true,
keep_fnames: true
},
compress: {
warnings: false,
screw_ie8: true
},
comments: false
}),
]

6.定义生产环境插件

修改配置文件

plugins: [
// 在构建的过程中删除警告
new webpack.DefinePlugin({
'process.env':{
NODE_ENV:'"production"'
}
})
]

7.自动打开浏览器插件

npm install open-browser-webpack-plugin -save-dev

使用

// 自动打开浏览器插件
var OpenBrowserPlugin = require('open-browser-webpack-plugin') plugins: [
// 删除文件夹的插件
new OpenBrowserPlugin({url: 'http://localhost:8080/', browser: 'chrome'})
]

.

webpack2 详解的更多相关文章

  1. webpack入门详解

    webpack入门详解(基于webpack 3.5.4  2017-8-22) webpack常用命令: webpack --display-error-details    //执行打包 webpa ...

  2. Linq之旅:Linq入门详解(Linq to Objects)

    示例代码下载:Linq之旅:Linq入门详解(Linq to Objects) 本博文详细介绍 .NET 3.5 中引入的重要功能:Language Integrated Query(LINQ,语言集 ...

  3. 架构设计:远程调用服务架构设计及zookeeper技术详解(下篇)

    一.下篇开头的废话 终于开写下篇了,这也是我写远程调用框架的第三篇文章,前两篇都被博客园作为[编辑推荐]的文章,很兴奋哦,嘿嘿~~~~,本人是个很臭美的人,一定得要截图为证: 今天是2014年的第一天 ...

  4. EntityFramework Core 1.1 Add、Attach、Update、Remove方法如何高效使用详解

    前言 我比较喜欢安静,大概和我喜欢研究和琢磨技术原因相关吧,刚好到了元旦节,这几天可以好好学习下EF Core,同时在项目当中用到EF Core,借此机会给予比较深入的理解,这里我们只讲解和EF 6. ...

  5. Java 字符串格式化详解

    Java 字符串格式化详解 版权声明:本文为博主原创文章,未经博主允许不得转载. 微博:厉圣杰 文中如有纰漏,欢迎大家留言指出. 在 Java 的 String 类中,可以使用 format() 方法 ...

  6. Android Notification 详解(一)——基本操作

    Android Notification 详解(一)--基本操作 版权声明:本文为博主原创文章,未经博主允许不得转载. 微博:厉圣杰 源码:AndroidDemo/Notification 文中如有纰 ...

  7. Android Notification 详解——基本操作

    Android Notification 详解 版权声明:本文为博主原创文章,未经博主允许不得转载. 前几天项目中有用到 Android 通知相关的内容,索性把 Android Notificatio ...

  8. Git初探--笔记整理和Git命令详解

    几个重要的概念 首先先明确几个概念: WorkPlace : 工作区 Index: 暂存区 Repository: 本地仓库/版本库 Remote: 远程仓库 当在Remote(如Github)上面c ...

  9. Drawable实战解析:Android XML shape 标签使用详解(apk瘦身,减少内存好帮手)

    Android XML shape 标签使用详解   一个android开发者肯定懂得使用 xml 定义一个 Drawable,比如定义一个 rect 或者 circle 作为一个 View 的背景. ...

随机推荐

  1. PAT Basic 1045

    1045 快速排序 著名的快速排序算法里有一个经典的划分过程:我们通常采用某种方法取一个元素作为主元,通过交换,把比主元小的元素放到它的左边,比主元大的元素放到它的右边. 给定划分后的 N 个互不相同 ...

  2. 【MySQL】浅谈 varchar(N)

    一  前言  varchar(N) N代表什么意思,能存放多少个中文字符?属于老生常谈的问题了,今天又被一个开发同事问我关于这个问题,索性写一篇文章来具体介绍一下.二 理论知识 先说明一下 MySQL ...

  3. WEB框架——WEB框架本质

    武sir http://www.cnblogs.com/wupeiqi/articles/5237672.html

  4. 【01】blockqote美化

    [01]blockqote美化   <!DOCTYPE html> <html lang="zh-cn"> <head> <meta ch ...

  5. java 词频统计代码

    package hello; import java.io.BufferedReader; import java.io.FileNotFoundException; import java.io.F ...

  6. 【php学习之路】微信公众帐号

          上个月开始学习php,算上中间放假的时间差不多有一个月了.这段时间呢,每天上班没事的时候不慌不忙的看下php,刚开始也只是看下php中文手册,看完一遍好像没什么感觉.于是就想啊,做个什么东 ...

  7. SPOJ - ADAQUEUE ,双端队列简单运用!

    ADAQUEUE - Ada and Queue 表示这题是学弟带的榜,题还没看完,学弟吐了一句:这不就是双端队列嘛.于是掏出布满尘埃的<曾粽根ACM程序设计>,嗯,确实是裸题,现学现做. ...

  8. 【Luogu】P3052摩天大楼里的奶牛(遗传算法乱搞)

    一道状压题,但今天闲来无事又用遗传乱搞了一下. 设了一个DNA数组,DNA[i]记录第i个物品放在哪个组里.适应度是n-这个生物的组数+1. 交配选用的是轮盘赌和单亲繁殖——0.3的几率单点变异.(事 ...

  9. 做运动(Dijkstra+并查集+MST)

    上面的题解是这样,这道题我真的脑残,其实打代码的时候就意识到了许多,可以用Dfs+Dij+二分,这样还可以卡一卡 但是我打了spfa+spfa+二分,这个显然很慢,类似的题目我好像还做过一道的,就是在 ...

  10. BS4(BeautifulSoup4)的使用--find_all()篇

    可以直接参考 BS4文档:https://www.crummy.com/software/BeautifulSoup/bs4/doc/index.zh.html#find-all 注意的是: 1.有些 ...