webpack-pages

1:webpack.config.js 文件配置

const path = require('path');const HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = {    entry: {        app: './src/app.js',        a: './src/js/a.js',        b: './src/js/b.js'    },    devServer: {        contentBase: './dist'    },    output: {        path: path.resolve(__dirname, 'dist'),        filename: 'js/[name].js',        // publicPath: '/'     },    module: {        rules: [            { test: /\.js$/, exclude: path.resolve(__dirname, '/node_modules/'), loader: "babel-loader" },            {                test: /\.css$/,                loader: 'style-loader!css-loader!postcss-loader'            },            {                test: /\.less$/,                loader: 'style-loader!css-loader!less-loader!postcss-loader'            },            {                test: /\.html$/,                loader: 'html-loader'            },            {                test: /\.(png|jpg|gif|svg)$/i,                loader: 'file-loader'            }        ]        // exclude 绝对路径 可以提升打包速度     },    plugins: [        new HtmlWebpackPlugin({            template: './a.html',            filename: 'index.html',            inject: 'body'        }),        new HtmlWebpackPlugin({            template: './b.html',            filename: 'b.html', // 设置生成文件的名称            inject: 'head', //指定生成的脚本 放置在head区域            chunks: ['a'],            // excludeChunks:['a','c'], //除了这里的文件其他的都引入            minify: {                removeComments: true, // 去除注释                collapseWhitespace: true //去除空格 更多参数看官方配置             }        })    ]}

2: server.js 配置文件

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 () {    // body...    console.log('example app listening on port 3000!');})

3：postcss.config.js 配置文件

module.exports = {    plugins: {      'autoprefixer': {browsers: 'last 5 version'}    }  }

4： package.json 配置文件

{  "name": "webpack-demo-2",  "version": "1.0.0",  "description": "",  "main": "index.js",  "babel": {    "presets": [      "env"    ]  },  "scripts": {    "test": "echo \"Error: no test specified\" && exit 1",    "watch": "webpack --watch",    "start": "webpack-dev-server --open",    "server": "node server.js",    "build": "webpack"  },  "author": "",  "license": "ISC",  "dependencies": {    "html-webpack-plugin": "^2.30.1",    "webpack": "^3.5.5"  },  "devDependencies": {    "autoprefixer": "^7.1.3",    "babel-core": "^6.26.0",    "babel-loader": "^7.1.2",    "babel-preset-env": "^1.6.0",    "babel-preset-latest": "^6.24.1",    "css-loader": "^0.28.7",    "express": "^4.15.4",    "file-loader": "^0.11.2",    "html-loader": "^0.5.1",    "i": "^0.3.5",    "less": "^2.7.2",    "less-loader": "^4.0.5",    "node-sass": "^4.5.3",    "postcss": "^6.0.10",    "postcss-loader": "^2.0.6",    "sass": "^1.0.0-beta.2",    "sass-loader": "^6.0.6",    "style-loader": "^0.18.2",    "webpack-dev-middleware": "^1.12.0",    "webpack-dev-server": "^2.7.1"  }}

5：.babelrc 配置文件

{  "presets": ["env"]}

6：安装依赖

npm install

7：运行

webpack