webpack学习

1、css-loader 模块化css文件，让webpack可以处理css文件，style-loader 在html 中插入style标签并把css代码插入到style标签中。写法是: style-loader!css_loader,有的需要加浏览器前缀，有时候需要处理css文件中import进来的css文件这个时候需要以如下方式写loader

{

  test: /\.css$/,

  loader: 'style-loader!css-loader?importLoaders=1!postcss-loader'

}

　　

备注:importLoaders=1用来处理在css中import样式文件[css]时不能转换兼容代码的问题

{

  test: /\.less$/,

  loader: 'style!css!postcss!less'

}

{

  test: /\.scss$/,

  loader: 'style!css!postcss!sass'

}

　　

2、chunkhash 只有在文件发生变化的时候才生产hash，hash 是文件打包的hash也就是说每打包一次都会生成一次hash，所以，文件名称引用时时候chunkhash，因为文件改变是才生产hash是很有用的。

 

3、htmlwebpackplugin 这个webpack插件可以在html中使用模板语言，重要的是可以改变已经产生hash的js链接

4、优化打包速度，可以在loader里面用exclude排除范围，exclude指定包含的范围。[include作用比exclude作用大]

 

5、path.resolve（__dirname, 'app/src'）生成绝对路径，__dirname是当前脚本运行路径

 

6、图片文件如果要打包，且图片文件在src中，这个时候引入方式为

<img src="${require('../../assets/bg.png')}"></img>

{

  test: /\.(png|jpg|gif|svg)$/i,

  loaders: ['url-loader?limit=1000&name=assets/[name]-[hash:5].[ext]', // 参数的意思是图片文件存在assets文件下且小于1000kb的就直接用base64转换成image:data

  'image-webpack' // 压缩图片

  ]

}

　　

7、node中--save-dev 和 --save的写法区别

npm install  vue-cli (安装vue-cli )  有的时候有看到其它两种写法:  --save-dev 和 --save的写法。这两个有一定的区别，我们都知道package.json  中有一个 “dependencies” 和 “devDependencies” 的。dependencies 是用在开发完上线模式的，就是有些东西你上线以后还需要依赖的，比如juqery , 我们这里的vue 和 babel-runtime（Babel 转码器 可以将ES6 转为ES5 ）， 而devDependencies 则是在开发模式执行的，比如我们如果需要安装一个node-sass 等等。有的时候看到package.json中安装的模块版本号前面有一个波浪线。例如: ~1.2.3 这里表示安装1.2.x以上版本。但是不安装1.3以上。

详细信息见 http://www.cnblogs.com/PeunZhang/p/5553574.html#npm-install

备注：注意一个细节问题，使用 npm install x -S 或者 npm install x --save 安装的插件会在package.json文件中的depedencies 字段中出现 相应的依赖，这就意味着打包之后的文件中包含这些文件，因为这些依赖是生产环境的依赖，而 npm install x --D 或者 npm install x --save-dev 安装的插件会在package.json 文件中的devDependencies 中出现相应的依赖，这些依赖在打包的时候不会被打包到静态文件中。 所以安装插件时注意一下生产环境和开发环境的插件安装方式

 

8、devmiddleware 将编译之后的文件都放到内存中，适用于开发环境使用

9、hotmiddleware 热更新修改之后的文件

10、打包编译成功之后浏览器更新,这段代码需要在每次更新之后打包更新页面内容

client.js

/* eslint-disable */
require('eventsource-polyfill')
var hotClient = require('webpack-hot-middleware/client?noInfo=true&reload=true')

hotClient.subscribe(function (event) {
  if (event.action === 'reload') {
    window.location.reload()
  }
})

dev-server.js

var express = require('express')
var app = express()
var path = require('path')
var webpack = require('webpack')
var webpackConfig = require('./webpack.config.js')
var opn = require('opn')

Object.keys(webpackConfig.entry).forEach(function (name) {
  webpackConfig.entry[name] = ['./dev-client'].concat(webpackConfig.entry[name])
})

var compiler = webpack(webpackConfig)

var devMiddleware = require('webpack-dev-middleware')(compiler, {
  publicPath: '/',
  quiet: true
})

var hotMiddleware = require('webpack-hot-middleware')(compiler, {
  log: () => {}
})

compiler.plugin('compilation', function (compilation) {
  compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {
    hotMiddleware.publish({ action: 'reload' })
    cb()
  })
})
var staticPath = path.posix.join('/', 'src')
app.use(staticPath, express.static('./src'))

app.use(express.static('dist'))
// app.get('/', function (req, res) {
//   // res.sendFile(__dirname+'/index.html');
// })
app.use(require('connect-history-api-fallback')())
app.use(devMiddleware)
app.use(hotMiddleware)

var _resolve
var readyPromise = new Promise(resolve => {
  _resolve = resolve
})

app.listen(3033, () => {
  console.log(`listen at http://localhost:3033`)
  opn('http://localhost:3033')
  _resolve()
})

devMiddleware.waitUntilValid(function () {
  console.log('> Listening at 3033\n')
})

module.exports = {
  ready: readyPromise,
  close: () => {
    server.close()
  }
}

webpack.config.js

let webpack = require('webpack')
var path = require('path')
var htmlwebpackplugin = require('html-webpack-plugin')
var FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
module.exports = {
  entry: {app: './src/main.js'},
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'js/[name]-[hash].js'
  },
  module: {
    loaders: [{
      test: /\.js$/,
      loader: 'babel-loader',
      include: path.resolve(__dirname, 'src'),
      exclude: path.resolve(__dirname, 'node_modules'),
    },
    {
      test: /\.vue$/,
      loader: 'vue-loader',
      include: path.resolve(__dirname, 'src'),
      exclude: path.resolve(__dirname, 'node_modules')
    },
    {
      test: /\.js$/,
      loader: 'babel-loader',
      include: path.resolve(__dirname, 'src'),
      exclude: path.resolve(__dirname, 'node_modules')
    },
    {
      test: /\.less$/,
      include: '/src',
      loader: 'style!css!postcss!less',
      include: path.resolve(__dirname, 'src'),
      exclude: path.resolve(__dirname, 'node_modules')
    }]
  },
  // cheap-module-eval-source-map is faster for development
  devtool: '#cheap-module-eval-source-map',
  plugins: [
    // ...
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"development"' // production
      }
    }),
    new htmlwebpackplugin({
      // filename: '[name]-[hash].html',
      filename: 'index.html',
      template: 'index.html',
      inject: true
    }),
    new webpack.HotModuleReplacementPlugin(), // 热替换，也就是更新的地方会被替换，没有更新的地方不会替换
    new webpack.NoEmitOnErrorsPlugin(),
    new FriendlyErrorsPlugin() // 控制台热替换
  ]
}

　　

11、css module