webpack点滴

一个比较完整的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://webpackdoc.com/

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安装的是生产环境的依赖关系。

64.webpack.config.js中

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