webpack学习之三,开发,即使用source map,3个自动编译代码的工具

一.使用source map

source map主要是用来定位程序出错等具体位置信息的

1.配置webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
    entry: {
        app: './src/index.js',
        print: './src/print.js'
    },

    // 使用source map,用于定位错误代码
    devtool: 'inline-source-map',

    // 使用插件
    plugins: [
        new CleanWebpackPlugin(['dist']),
        new HtmlWebpackPlugin({
            title: 'OutPut Management'
        })
    ],

    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist')
    }
}

2.在print.js中生成一个错误

export default function printMe() {
    // console.log('I get called from print.js!');
    consolew.log('I get called from print.js!');
}

3.运行 npm run build

二.webpack自动编译代码工具

• Watch Mode
• webpack-dev-server
• webpack-dev-middleware

1.Watch Mode

缺点是要手动刷新页面

{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    // 观察者模式的使用,无需下载插件  
    "watch": "webpack --watch",
    "start":"webpack-dev-server --open",
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "clean-webpack-plugin": "^0.1.18",
    "css-loader": "^0.28.9",
    "csv-loader": "^2.1.1",
    "file-loader": "^1.1.6",
    "html-webpack-plugin": "^2.30.1",
    "style-loader": "^0.20.1",
    "webpack": "^3.10.0",
    "webpack-dev-server": "^2.11.1",
    "xml-loader": "^1.2.1"
  },
  "dependencies": {
    "lodash": "^4.17.5"
  }
}

2.webpack-dev-server

npm install --save-dev webpack-dev-server

(1)webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
    entry: {
        app: './src/index.js',
        print: './src/print.js'
    },

    // 使用source map,用于定位错误代码
    devtool: 'inline-source-map',

    // 使用webpack-dev-server
    devServer: {
        // 设置基本目录
        contentBase: './dist'
    },

    // 使用插件
    plugins: [
        new CleanWebpackPlugin(['dist']),
        new HtmlWebpackPlugin({
            title: 'OutPut Management'
        })
    ],

    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist')
    }
}

(3)package.json

{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "watch": "webpack --watch",
    // 使用webpack-dev-server , 打包完成后自动打开一个本地服务器,并打开网页
    "start":"webpack-dev-server --open",
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "clean-webpack-plugin": "^0.1.18",
    "css-loader": "^0.28.9",
    "csv-loader": "^2.1.1",
    "file-loader": "^1.1.6",
    "html-webpack-plugin": "^2.30.1",
    "style-loader": "^0.20.1",
    "webpack": "^3.10.0",
    "webpack-dev-server": "^2.11.1",
    "xml-loader": "^1.2.1"
  },
  "dependencies": {
    "lodash": "^4.17.5"
  }
}

(4)运行 npm start即可

3.webpack-dev-middleware

(1)

npm install --save-dev express webpack-dev-middleware

(2)webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
    entry: {
        app: './src/index.js',
        print: './src/print.js'
    },

    // 使用source map,用于定位错误代码
    devtool: 'inline-source-map',

    // 使用webpack-dev-server
    devServer: {
        contentBase: './dist'
    },

    // 使用插件
    plugins: [
        new CleanWebpackPlugin(['dist']),
        new HtmlWebpackPlugin({
            title: 'OutPut Management'
        })
    ],

    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist'),
        // 新增公共路径,在express服务器也会被用到
        publicPath:'/'
    }
}

(3)新增server.js,用来开启一个express服务器

const express = require('express');
const webpack = require('webpack');
const webpackDevMiddleware = require('webpack-dev-middleware');

const app = express();
const config = require('./webpack.config.js');
const compiler = webpack(config);

app.use(webpackDevMiddleware(compiler,{
    publicPath:config.output.publicPath
}));

app.listen(3000,function () {
    console.log('Example app listening on port 3000!\n');
});

(4)package.json

  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "watch": "webpack --watch",
    "start": "webpack-dev-server --open",
    // 使用webpack-dev-middleware,并利用express开启一个node服务器
    "server":"node server.js",
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "clean-webpack-plugin": "^0.1.18",
    "css-loader": "^0.28.9",
    "csv-loader": "^2.1.1",
    "express": "^4.16.2",
    "file-loader": "^1.1.6",
    "html-webpack-plugin": "^2.30.1",
    "style-loader": "^0.20.1",
    "webpack": "^3.10.0",
    "webpack-dev-middleware": "^2.0.4",
    "webpack-dev-server": "^2.11.1",
    "xml-loader": "^1.2.1"
  },
  "dependencies": {
    "lodash": "^4.17.5"
  }
}

(5)运行 npm run server