webpack学习第七步——提升开发效率

watch 监听变化自动打包

• 在package.json中配置

// 增加 --watch
"scripts": {
    "start": "webpack --watch"
},

• 此时index.js

import Header from './header'
import avatar from "./avatar.jpg";
import style from './index.scss'

// Header()
let img = new Image()
img.src = avatar
img.classList.add(style.avatar)
let root =document.getElementById('root')
root.append(img)

• 打开html

• 修改index.js

import Header from './header'
import avatar from "./avatar.jpg";
import style from './index.scss'

Header()
let img = new Image()
img.src = avatar
img.classList.add(style.avatar)
let root =document.getElementById('root')
root.append(img)

• webpack会自动打包
• 刷新浏览器会看到页面发生了变化

• 缺点：这时候的index.html是file文件，file无法发起ajax请求，因为ajax要求是http(s)的

利用webpack-dev-server实现自动打包

• 安装webpack-dev-server

npm install webpack-dev-server -D

• 修改package.json

"scripts": {
    "start": "webpack-dev-server"
}

• 运行npm run start

• webpack-dev-server 不会生成build文件夹，打包到内存，提升打包速度，更快
• 打开http:localhost:8080/

• 修改index.js,浏览器自动刷新

自动打开浏览器访问服务器地址

• 修改webpack.config.js

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CleanWebpackPlugin = require('clean-webpack-plugin')
module.exports = {
    mode: "development",
    entry: './src/index.js',
    devtool: "source-map",
    // 增加devServer配置
    devServer: {
        contentBase: './build', // 服务器地址
        open: true // 自动打开浏览器
    },
    module: {
        rules: [{
            test: /\.(jpg|png|gif)$/,
            use: {
                loader: "url-loader",
                options: {
                    name: '[name]_[hash].[ext]',
                    outputPath: 'images/',
                    limit: 2048
                }
            }
        },{
            test: /\.scss$/,
            use: [
                'style-loader',
                {
                    loader: "css-loader",
                    options: {
                        importLoaders: 2 ,// 通过import引入的scss文件也要走前两个loader
                        modules: true
                    }
                },
                'sass-loader',
                'postcss-loader'
            ]
        }]
    },
    plugins: [
        new HtmlWebpackPlugin({
        template: 'src/index.html'
        }),
        new CleanWebpackPlugin()
    ],
    output: {
        path: path.resolve(__dirname, 'build'),// 绝对路径+bundle文件夹
        filename: 'bundle.js'
    }
}

• 浏览器自动打开并访问服务器地址

修改默认端口号

• 修改webpack.config.js,默认端口号为8080

devServer: {
    contentBase: './build',
    open: true,
    port: 1314
}

proxy 跨域代理

• 新增data.json文件

• webserver 启动服务

• 本地服务器文件

• webpack.config.js中增加proxy

devServer: {
    contentBase: './build',
    open: true,
    proxy: {
        '/api': 'http:localhost:3000'
    }
},

• 修改index.js去请求本地服务器文件

fetch('/api/data.json').then((data)=>{
    return data.json()
}).then(res => console.log(res))

• 可以成功访问，无跨域问题

自己写server.js实现自动打包

• 利用express启动服务

npm install express -D
npm install webpack-dev-middleware -D

• 增加server.js监听服务器

const express = require('express')
const webpack = require('webpack')

const app = express()

app.listen(3344,()=>{
    console.log('server is running')
})

• 修改package.json

"scripts": {
    "start": "webpack-dev-server",
    // 增加命令，用于使用server.js
    "server": "node server.js"
  },

• 使用命令

• 修改server.js

const express = require('express')
const webpack = require('webpack')
const webpackDevMiddleware = require('webpack-dev-middleware')
const config = require('./webpack.config')
const compiler = webpack(config) // webpack编译器

const app = express()
app.use(webpackDevMiddleware(compiler,{
    // 可设置publicPath
    // publicPath: config.output.publicPath
}))

app.listen(3344,()=>{
    console.log('server is running')
})

• 启动服务并打开localhost:3344

npm run server

• 修改index.js会自动打包

• 刷新浏览器数据会更新