一个比较完整的webpack的配置，自己配置不断更新。
const path = require('path')
const configs = require('./configs/')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const extract = new ExtractTextPlugin('css/[name].[hash].css')
const autoprefixer = require('autoprefixer')({ browsers: ['iOS >= 7', 'Android >= 4.1'] })
const IS_ENV = process.env.NODE_ENV == 'production'
const plugins = []
if (IS_ENV) {
plugins.push(new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('production')
}
}))
plugins.push(new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
},
sourceMap: true
}))
}
module.exports = {
target: 'web',
entry: {
main: ['babel-polyfill', './src/main.js']
},
output: {
filename: 'js/[name].[hash].js',
path: path.resolve(__dirname, `${configs.dest}static`),
publicPath: configs.publicPath
},
module: {
rules: [
{
test: /\.js$/,
use: ['babel-loader', 'eslint-loader']
},
{
test: /\.vue$/,
use: [
{
loader: 'vue-loader',
options: {
loaders: {
css: ExtractTextPlugin.extract({
use: ['css-loader'],
fallback: 'vue-style-loader'
}),
less: ExtractTextPlugin.extract({
use: ['css-loader', 'less-loader'],
fallback: 'vue-style-loader'
})
},
postcss: [autoprefixer]
}
},
'eslint-loader'
]
},
{
test: /\.css$/,
use: extract.extract([
'css-loader',
{
loader: 'postcss-loader',
options: {
plugins: [autoprefixer]
}
}
])
},
{
test: /\.less$/,
use: extract.extract([
'css-loader',
{
loader: 'postcss-loader',
options: {
plugins: [autoprefixer]
}
},
'less-loader'
])
},
{
test: /\.(eot|woff|svg|ttf|woff2|)(\?|$)/,
use: [
{
loader: 'file-loader',
options: {
name: 'iconfont/[name].[hash].[ext]'
}
}
]
},
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 2000,
name: 'images/[name].[hash].[ext]'
}
}
]
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: path.resolve(__dirname, 'src/template/index.html'),
filename: '../index.html',
title: configs.title,
hash: true,
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
}
}),
extract
].concat(plugins),
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js',
'configs$': path.resolve(__dirname, 'configs/base.js'), //程序的一些基本配置
'util$': path.resolve(__dirname, 'src/util/index.js'), //常用工具方法
'is-seeing$': path.resolve(__dirname, 'src/util/is-seeing.js'),
'pull-list$': path.resolve(__dirname, 'src/mixins/pull-list.js'), //拉取列表
'route-data$': path.resolve(__dirname, 'src/libs/route-data/index.js'), //页面数据缓存
'stores': path.resolve(__dirname, 'src/stores/') //常用工具方法
},
extensions: ['.js', '.vue', '.json']
},
devtool: IS_ENV ? false : '#cheap-module-eval-source-map'
}
做一个对webpack配置最快的人，小范围内最了解webpack的人。
哈哈，这么火的webpack，最近正好不忙，来体验一下吧。
http://blog.csdn.net/hongchh/article/details/55113751
http://blog.csdn.net/kun5706947/article/details/52596766
http://www.cnblogs.com/sloong/p/5826818.html
强力推荐 http://www.cnblogs.com/lvyongbo/p/5953464.html
关于热加载可以看的博客：http://www.tuicool.com/articles/BZrQ3mv
一个webpack中比较好的博客：http://www.cnblogs.com/LIUYANZUO/p/5184424.html
http://www.qdfuns.com/notes/42711/902335dd33c37cbf2ab81b3a4eb2c76b.html
webpack打包中externals的用法和缺陷。
https://zhuanlan.zhihu.com/p/21748318?refer=starkwang
webpack的优势
1. webpack 是以 commonJS 的形式来书写脚本滴，但对 AMD/CMD 的支持也很全面，方便旧项目进行代码迁移。
commonjs(同步的，一个单独的文件就是一个模块。加载模块使用require方法，该方法读取一个文件并执行，最后返回文件内部的exports对象)
//公有方法
function foobar () {
this.foo = function () {
// do someing ...
}
this.bar = function () {
//do someing ...
}
}
//exports对象上的方法和变量是公有的
var foobar = new foobar();
exports.foobar = foobar;
amd,AMD规范允许输出模块兼容CommonJS规范
例子一：
//通过数组引入依赖 ，回调函数通过形参传入依赖
define(['someModule1', ‘someModule2’], function (someModule1, someModule2) {
function foo () {
/// someing
someModule1.test();
}
return {foo: foo}
});
例子二：
define(function (require, exports, module) {
var reqModule = require("./someModule");
requModule.test();
exports.asplode = function () {
//someing
}
});
cmd CMD推崇依赖就近，AMD推崇依赖前置
AMD的api默认是一个当多个用，CMD严格的区分推崇职责单一。例如：AMD里require分全局的和局部的。CMD里面没有全局的 require,提供 seajs.use()来实现模块系统的加载启动。CMD里每个API都简单纯粹。
2. 能被模块化的不仅仅是 JS 了。
3. 开发便捷，能替代部分 grunt/gulp 的工作，比如打包、压缩混淆、图片转base64等
4. 扩展性强，插件机制完善，特别是支持 React 热插拔（见 react-hot-loader ）的功能让人眼前一亮。
初步的安装和学习：http://blog.csdn.net/kun5706947/article/details/52596766
http://www.tuicool.com/articles/BZrQ3mv
http://blog.csdn.net/github_26672553/article/details/52139023
http://www.wbc.com/Article/50764
webpack.config.js的配置
module.exports = { //entry: __dirname + "/app/main.js",//已多次提及的唯一入口文件 //多个入口的加载 entry: { app: [ __dirname+'/app/main.js' ] }, output: { path: __dirname + "/public",//打包后的文件存放的地方 filename: "all.js"//打包后输出文件的文件名 }, module: {//在配置文件里添加JSON loader loaders: [ { test: /\.json$/, loader: "json" } ] }, devServer: { contentBase: "./public",//本地服务器所加载的页面所在的目录 historyApiFallback: true,//不跳转 inline: true,//实时刷新 hot:true } }
package.json中
"scripts": {
"test": "webpack-dev-server --hot --inline"
}
-------------------------------------------------------------------------------------------------------
浏览器可以从：http://localhost:8080/admin/或者http://localhost:8080/consumer/进入
[name]就代表了上边的内容
=============================
下边的都是自己躺过的坑。
4. 我在mac上使用的时候，需要注意--save-dev 我们的save前两个--，dev前一个-,如果写错了就能保存版本了。
cnpm install webpack-dev-server --save-dev
5.webpack.config.js 中应该写babel-loader写成了babel(有些博客乱说的)
6.package.json中有了webpack-dev-server其实就可以不用webpack了。
7.在以下的版本中，只要在server的配置中写一个inline就可以实现热加载。不需要再scripts后边配置什么--hot都行。
"webpack": "^2.2.1",
"webpack-dev-server": "^2.4.1"
上面的版本我最近一次的测试结果中，inline:true 和--hot都不加，都可以实现不点击刷新热加载。
8.你会发现服务不能用ip访问，只能用localhost访问。启动的时候添加--host 0.0.0.0
9.--open 启动服务后，浏览器自动重启一个页面。默认打开index.html.
10.这是一个最最简单的webpack-dev-server的服务的配置，目的为了，我们平时的例子中，需要使用服务器的时候，快速的导入这个文件然后，装一个
webpack和webpack-dev-server 就可以使用了。
package.json中需要修改的：
"test": "webpack-dev-server --hot --open"
安装步骤：
1.------
cnpm init
2.------
package.json中需要修改的：
"test": "webpack-dev-server --hot --open"
3.------
cnpm install webpack --save-dev
4.------
cnpm install webpack-dev-server --save-dev
5.------
touch main.js webpack.config.js
如果没有index.html新建html.
6.index.html中
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title> <script type="text/javascript" src="./all.js"></script> </head> <body> hello piaopiaoran! <script type="text/javascript"> </script> </body> </html>
7.webpack.config.js中
module.exports = { //entry: __dirname + "/app/main.js",//已多次提及的唯一入口文件 //多个入口的加载 entry: { app: [ __dirname+'/main.js' ] }, output: { path: __dirname + "/",//打包后的文件存放的地方 filename: "all.js"//打包后输出文件的文件名 }, module: {//在配置文件里添加JSON loader loaders: [ { test: /\.json$/, loader: "json" } ] }, devServer: { contentBase: "./",//本地服务器所加载的页面所在的目录 historyApiFallback: true,//不跳转 inline: true,//实时刷新 hot:true } }
8.
webpack图片引入提示没有对应模块
https://segmentfault.com/q/1010000007664860
楼主遇到的问题可能是 "include" 没配置好。
上面引入失败的图片的路径是 "libs/emoji/image/xxx.png"，但楼主的 loader 里的 "include" 把 loader 的有效作用域限定在了 "libs/image" 目录下，所以这个 loader 对上面的图片是无效的。
可以考虑把 "libs/emoji/image" 这个文件夹也加到 "include" 数组里。
另外，按照楼主想要的效果，这里应该用 url-loader 而不是 file-loader。
https://github.com/webpack/ur...
url-loader 的效果是对于小于 limit 的文件，以 "data url" 的方式引入；对于大于 limit 的文件，则自动改用 file-loader 进行引入。
9.webpack的img-webpack模块报错。
http://blog.csdn.net/cloudsben/article/details/8164047
20.webpack 加载css中含有图片。
http://blog.csdn.net/github_26672553/article/details/52107165
21.在导入jackblog-vue中，我们需要考虑的问题。
img-webpack-loader解析错误
img-webpack-loader从2升级到了三
然后我mac安装了libpng
http://blog.csdn.net/cloudsben/article/details/8164047
然后更具提示安装确实的包。
发现了 spawn ENOENT
https://segmentfault.com/q/1010000005845999
升级了NPM
mac 上装 pngquant
http://www.tuicool.com/articles/UjAbuu
安装了一堆之后我重新删除了，然后又把 git上的配置拿下来，cnpm了一下就好了。
22. plugin 中的HtmlWebpackPlugin 这个表示html中的meta中的title，icon等。
var HtmlWebpackPlugin = require('html-webpack-plugin')
new HtmlWebpackPlugin({
favicon:path.join(__dirname,'src/favicon.ico'),
title: "Jackblog vue版",
template: path.join(__dirname,'src/index.html'),
inject: true
}),
23.extract-text-webpack-plugin 插件使用，把css独立出来不打包到js中。
第一部：var ExtractTextPlugin = require('extract-text-webpack-plugin')
这个表示可以直接用import './css/all.css'
上面的代码运行救过就是压缩后的css和js放在了同一个目录下，我们想让css单独放一个css目录,需要实例化ExtractTextPlugin
这是第一步和第二步
补充代码
//new ExtractTextPlugin('[hash:8].style.css', { allChunks: true })
//{ test: /\.css$/, loader: ExtractTextPlugin.extract('style-loader', 'css-loader?sourceMap' ) }
24.这个插件我暂时不知道有什么作用。
new webpack.optimize.OccurenceOrderPlugin()
25.OccurenceOrderPlugin后来变为OccurrenceOrderPlugin 多了一个r.
webpack.optimize.OccurrenceOrderPlugin()
26.
Error: Breaking change: ExtractTextPlugin now only takes a single argument. Either an options object *or* the name of the result file
这样的错误表示的是,
http://blog.csdn.net/real_bird/article/details/54852500
这个博客只有在百度搜出来点进去可以，直接点进去的话，会变样的。
27. 监听3000端口
listen EADDRINUSE :::3000
28.
webpack path和publicPath作用
path：用来存放打包后文件的输出目录
publicPath：指定资源文件引用的目录
用处：例如在express中，指定了public/dist是网站的根目录，网站的源文件存放在public中，那么就需要设置path:”./dist”指定打包输出到该目录，而publicPath就需要设置为”/”,表示当前路径。
publicPath取决于你的网站根目录的位置，因为打包的文件都在网站根目录了，这些文件的引用都是基于该目录的。假设网站根目录为public，引用的图片路径是’./img.png’，如果publicPath为’/’，图片显示不了，因为图片都打包放在了dist中，那么你就要把publicPath设置为”/dist”。
29. cross-env的使用方法。
功夫不负有心人，在万能的google上，我找到了解决方法：cross-env。
这个迷你的包能够提供一个设置环境变量的scripts，让你能够以unix方式设置环境变量，然后在windows上也能兼容运行。
使用方法：
-
安装cross-env:
npm install cross-env --save-dev -
在
NODE_ENV=xxxxxxx前面添加cross-env就可以了
30.
http://www.cnblogs.com/dreamless/p/6008362.html
为了热加载，我们把需要的js html放置到内存中。
webpack使用webpack-dev-middleware进行热重载
新手，刚开始学习webpack，想使用webdevserver，但定制性太差，于是研究了一下使用webpack-dev-middleware进行指定。 根据文档https://www.npmjs.com/package/webpack-hot-middleware 需要配置entry和output. 常规配置 entry: ['./src/main.js'], output: { path: path.resolve(__dirname, 'dist/'), filename: '[name].[hash].js', }, 但在热重载中，文件是不存放在硬盘上的，而是使用了memory-fs模块存放在内存中的，因此原始规则不能使用了。 查看与webpack-dev-middleware配合需要使用到webpack-hot-middleware，在内存中使用时需要为入口文件添加一个'webpack-hot-middleware/client'， 同时输出的文件也和原来不同，文件不再带有根目录，因此，Path和publicpath均需要修改，结果如下： entry: { app:[ 'webpack-hot-middleware/client', './src/main.js' ], }, output: { path: '/', // publicPath: '/' }, 同时还需要添加相应的热重载插件： plugins: [ // Webpack 1.0 new webpack.optimize.OccurenceOrderPlugin(), // Webpack 2.0 fixed this mispelling // new webpack.optimize.OccurrenceOrderPlugin(), new webpack.HotModuleReplacementPlugin(), new webpack.NoErrorsPlugin() ] 至此Js文件的生成已经完成了，但缺少Html,一样不能访问，需要使用'html-webpack-plugin'处理Html文件，复制到内存中。
31.
http://www.cnblogs.com/y896926473/articles/6011711.html
32.babel的使用。
在一个单独的文件夹中：
注释：可以在loaders中配置query参数来替代.babelrc
（1）需要这一些文件。
.babelrc
{ "presets": [ ["es2015"] ] }
cnpm install babel-preset-es2015 -g
cnpm install babel-preset-es2015 --save-dev
cnpm install babel --save-dev
cnpm install babel-cli --save-dev 安装全局命令的客户端，如果已经有的话，就不需要了。
package.json
{
"name": "babeltest",
"version": "1.0.0",
"description": "",
"main": "aa.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel": "^6.23.0",
"babel-cli": "^6.24.1"
}
}
aa.js
'use strict'
let a = 11;
babel aa.js //控制台输出
babel aa.js -o bb.js //输出到文件中
babel 可以一个文件夹下的东西都编译，然后放到另一个文件夹。
babel src -d lib
babel-node page.js
node如果没有'use strict' 也只支持es5.
browsersync 这个就是webpack的
browser-sync start —server
browser-sync start —server -f /lib/*.js
babel src -d lib //这条命令的意思说说,babel把 src下的目录处理到到lib目录下边。
33.图片压缩。
可以用npm先安装一个smushit这个包。
smushit img(这个是文件夹)
34.图片的一个基本的概念。
图片的交错压缩。
就是图片显示的时候，先显示一个模糊的，然后在慢慢清晰，但是无交错的时候，就是先显示一横横慢慢显示。
35.tinify这个压缩图片的付费包，还是可以的。
jpg压缩的比较小，但是png压缩的就比较大了。
36.base64和svg常用来处理图片。
base64直接把css中的图片以代码的形式加入到css中。
36.5 wos老师讲的html-loader主要在html页面中引入图片的时候，我们可以最html引入的图片进行压缩或者处理。（我看到的是图片被压缩放入到了html中，不是页面直接以base64放入）
37.npm init -y这个初始最块。-y
38.
webpack-dev-server --iFrame 这样子的话http://localhost:3000/webpack-dev-server/
webpack-dev-server --inline 这样子的话http://localhost:3000/
39.添加了--hot之后需要添加的配置。
添加了--hot之后，需要，引入一个webpack的变量，然后引入plugins的一个插件。
40.require("jquery")
这样子会引入jquery的所有源码。
41.
import from "./a.js"//js文件中，这里模块引入不需要写分号
@import "./a.css";//less或者sass中，这里引入的话，必须写分号
42.我们需要明白，
require或者import from引入js的时候，
即使在不同的module，如果引入同一js，代码也只会加载一次。
43.npm全局安装和局部安装的区别。
全局安装的话，任意第一个项目，任意一个模块都可以引用。但是别人使用的时候有问题，所以除了cli我们都是局部引用哈。
如果是命令行cli的，必须全局安装。
局部安装的，只能在本项目中引用。
44.amc规范中，require是全局的，而cmd规范中，sea.use是全局的。
45.在package.json中的script一次执行多个命令。
build:npm run build:babel && npm run build:watch && npm run build:server
"build:babel":"babel src -d lib",
"build:watch":"babel --watch src -d lib",
"build:server":"browser-sync start -server -f lib/*"
这里边的build:server也可以写成build-server.
46.browserify commonjs/index.js > index.js 压缩js代码
好像有参数-m -o 压缩并且进行变量名替换之类的。
47. less的编译。
@maincolor:#ff6699;
@mainColor-border:lighten (@masterColor,20%);
@padding-sam:10px;
cnpm install less -g
用的时候lessc就行。
less 打包成css并且压缩。
npm install less less-plugin-clean-css
lessc ./less/index.less > index.css —clean-css=“advanced”
js的打包压缩
uglifyjs index.js -m -o index.min.js
le
48. sass的编译稍后往上查下解决。
49.css中的图片编译
base64-css你可以在npm上搜索查看，我们会发现，一个没有全局话得模块但是用本地启动的方式。
node node_modules/base64-css/bin/cli.js -f index.css
50.npm install —production 这样子只安装生产环境的依赖。
51.json-loader的两种用法。
好像第一种是不能用的，以后再说吧。
52.因为webpack只有一个出口，但是有时候我们为了有多个出口，不吧所有的css都写进js中的话，那么我们需要把css独立出来一个.css文件，
我们会用这个插件。
为了调整下输出index.css的目录的位置。
53.对html的预处理。
尽量在模板内搞定这些事情。
54.原来就是用webpack -p就行了，现在官方建议用uglify后面
npm install uglify-js -g —save-dev
uglifyjs 文件/index.js -m -o 输出文件名（-m是个混合的命令）
55.分离Js库。
入口在配置一个：
v:['jquery']
还可以不通过npm 安装jquery，而是通过cdn加载
56.多个入口
57.图片打包。
用这个形式也是可以的。
另一种hash表达的形式。
58.如果html中有图片，也想通过图片的编码的话。
59.设置环境，但是不同的系统设置环境的方式不同，但是我们网上一个特别好的兼容工具。
60.webpack只是适合于单页面，或者说首页，如果你在消息页，详情页其他的地方也需要的话，那么我们建议最好name.config.js在配置一个js打包。
61. 我还不知道什么时候只用这个，先记录下来。
62. 这个github的webpack的配置还是值得一看的。
https://github.com/cccyb/vue-zhihu-daily/blob/master/build/webpack.base.conf.js
63.npm install 安装的是开发和生产所有环境的依赖。
而npm install --protduction安装的是生产环境的依赖关系。
publicPath中我们需要明白这是个虚拟的地方，在没打包前，代码的再存中以这个目录为标准。
65.这个需要在webpack -dev -server中配置host 和post，典型的端口被占用的问题。
66.
改为vue-loader就行哈。
67. HtmlWebpackPlugin这个的使用为了seo，国内的seo是搜索我们的html页面的关键词，所以最好不要放到js当中。所以考虑这个插件。
68. 这个resolve方法。
69.http://www.cnblogs.com/haogj/p/5160821.html
http://www.cnblogs.com/ghost-xyx/p/5812902.html
扫一扫
206
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
