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
')
})
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
