• 目錄

  
  
  捕獲.JPG
• 讓文件改動時webpack自動打包
  • package.json scripts添加

    "webpackwatch": "webpack --watch",

npm run webpackwatch

• 使用devserver開啟服務(wù)
  • package.json scripts添加

 "dev": "webpack-dev-server"

npm run dev

webpack.config.js配置

devServer:{
        contentBase:'./dist', //script webpack-dev-server  服務(wù)的根路徑
        open:true,//自動打開瀏覽器,
        hot:true
    },

• 配置hmr
  開啟時當html開發(fā)時只更改樣式 js進行的操作數(shù)據(jù)不會丟失，瀏覽器只會局部刷新樣式
  • webpack.config.js

      const path = require('path')
      const HtmlWebpackPlugin = require('html-webpack-plugin')
      const {CleanWebpackPlugin}= require('clean-webpack-plugin')
      const webpack = require('webpack');
     devServer:{
        contentBase:'./dist', //script webpack-dev-server
        open:true,//自動打開瀏覽器,
        hot:true,
     },
         plugins:[
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin(
            {
                title:'learnWebpack',
                filename:'index.html',
                template:'./index.html'
            }
        ),
       new webpack.HotModuleReplacementPlugin(),
    ]
    

• 代理
  發(fā)送ajax請求時，如果匹配則會轉(zhuǎn)發(fā)，可以代理跨域

devServer:{
        contentBase:'./dist', //script webpack-dev-server
        open:true,//自動打開瀏覽器,
        hot:true,
        // hotOnly:true,//hmr
        proxy:{
            '/api':"localhost:3000", //如果請求  /api/login    則會加上localhost:3000/api/login
            changeOrigin: true,//跨域
        }
        // proxy: {
        //     '/api': {
        //         target: 'http://localhost:3000',
        //         pathRewrite: {'^/api' : 'redict'}
        //     }    發(fā)送  localhost:3000/redict/login
        // }
        // proxy: [{
        //     context: ['/auth', '/api'],
        //     target: 'http://localhost:3000',也可以這樣匹配多個
        // }]
    },

github地址