webpack3基础总结

## 1. 什么是webpack？
　　+ 前端人员的打包、压缩、测试的多方位为一体的工具。
## 2. 安装webpack 现在4.0版本以上的和3.几的版本不一样
　　+ cnpm i webpack@3.5.6 -g

　　+ webpack a.js b.js 会生成一个b.js
　　+ css 引入的需要转化
　　+ npm install style-loader css-loader

## 3. webpack.config.js 文件配置
　　module.exports = {
　　　　entry: "./js/a.js", // 入口文件
　　　　output: {
　　　　filename: "./js/b.js" // 输出文件
　　　　},
　　　　devtool: "source-map", // webpack 本身是没有js代码的需要配置
　　　　module: {
　　　　　　loader: [{
　　　　　　　　test: "\.css$/",
　　　　　　　　loader: 'style-loader!css-loader' //规则
　　　　　　}]
　　　　}
　　}
　　+ webpack -p 压缩
　　+ webpack -w 观察中--自动更新--需要刷新
　　+ webpack -d 调试模块 -- webpack 本身是没有js代码的需要配置
　　+ webpack -progress 告诉你每步在做什么

　　+ webpack -pwd 可以组合使用

## 4. 可以更改webpack.config.js的名称
　　+ webpack --config fly.js(自定义的名字)
　　+ webpack --config fly.js -dw // 还是可以组合使用的

## 5. 主页面也可以引用es6的
　　+ index.js -- import c from "./c.js"
　　++ `${c.a}+${c.b}`
　　+ c.js export default {
　　　　a: "10",
　　　　b: "20",
　　　　c: {}
　　　}

## 6. 热更新不用刷新了
　　+ npm install webpack-dev-server -g
　　+ 方法一： webpack-dev-server --port 1207 // 配合webpack.config.js
　　+ 方法二： module.exports = {
　　　　　　　　entry: "./js/a.js", // 入口文件
　　　　　　　　output: {
　　　　　　　　　　filename: "./js/b.js" // 输出文件
　　　　　　　　},
　　　　　　　　devtool: "source-map", // webpack 本身是没有js代码的需要配置
　　　　　　　　devServer: {
　　　　　　　　　　port: 1207 // 配置热更新
　　　　　　　　},
　　　　　　　　module: {
　　　　　　　　　　loader: [{
　　　　　　　　　　test: "\.css$/",
　　　　　　　　　　loader: 'style-loader!css-loader' //规则
　　　　　　　　}]
　　　　　   　}
　　　　　　}

　　　　　　运行要用 webpack-dev-server
+ 方法三：在package.json里面更改

　　　　"scripts": {
　　　　　　"dev": "webpack-dev-server"
　　　　}
　　　　运行命令: npm run dev

## 7. 图片引入
　　+ css中引入图片，背景图片，通过入口文件引入
　　　　- cnpm i url-loader // 图片和字体一般使用
　　　　- webpack.config.js中配置：
　　　　loader: [{
　　　　　　test: "\.css$/",
　　　　　　loader: 'style-loader!css-loader' //规则
　　　　　　}，{
　　　　　　test: "\.(jpg|jpeg|gif|png)$/i", // 忽略大小写
　　　　　　loader: 'url-loader?limit=4096&name=image/[hash:10].[ext]' //最大4M,10位哈希，最高32位
　　　　　　loader: 'url-loader?limit=4096&name=image/[name].[ext]' // 不使用哈希值，直接以自己名称命名
　　　　　　}]
　　+ html中直接引入图片 不能使用iamge中的图片
　　　　- cnpm i html-withimg-loader
　　　　- webpack.config.js中配置
　　　　　　loader: [{
　　　　　　　　test: "\.html$/",
　　　　　　　　loader: 'html-with-img-loader' //规则
　　　　　　}]
　　　　- 重新对html赋值,在入口文件进行修改
　　　　var html = require("./html");
　　　　document.body.innerHtml = html;
　　　　+ 中文网： www.css88.com/doc/webpack2/loaders/url-loader

## 8. 插件 plugins
　　+ cnpm i webpack
　　+ 在webpack.config.js中
　　　　- var webpack = require("webpack");
　　　　- plugins: [
　　　　　　new webpack.BannerPlugin("this is 表头注释"), //压缩的头注释，作者
　　　　]
　　+ 压缩html
　　　　- cnpm i html-webpack-plugin
　　　　- 在webpack.config.js中配置
　　　　var htmlWebpackPlugin = require("html-webpack-plugin");
　　　　plugins: [
　　　　　　new htmlWebpackPlugin({
　　　　　　'template': "./index.html",
　　　　　　'filename'："./index.mim.html" // 在html中可以不用引用b
　　　　　　})
　　　　]
　　　　- webpack-dev-server/webpack 都可以

## 9. webpack结合bootstrap使用
　　+ 下载模板
　　　　- cnpm i style-loader css-loader html-withimg-loader webpack url-loader
　　+ 会有图标、字体的报错
　　　　- webpack.config.js css引入
　　　　- cnpm i file-loader
　　　　- loader: [{
　　　　　　test: "/\.(svg|ttf|woff|woff2)$/i",
　　　　　　loader: "url-loader?limit=4096&name=fonts/[hash:10].[ext]"
　　　　　　},{
　　　　　　test: "/\.eot$/i",
　　　　　　loader: "file-loader"
　　　　　　}]]
　　+ jquery 引入 全局的
　　　　- cnpm i jquery
　　　　- plugins: [
　　　　　　new webpack.ProvidePlugin({
　　　　　　$: "jquery",
　　　　　　jQuery: "jquery"
　　　　　})
　　　　]