基于webpack4 的开发环境搭建

本示例基于 webpack4.0 以上版本搭建的开发环境。

• 支持多页面应用程序
• 支持ES6新语法
• 支持阿里图标库
• 支持js/css文件压缩

本示例中目录结构如下

工程目录结构

• iconfont 目录为阿里图标库中下载的字体图标

webpack 需要作以下配置

安装所需要的依赖包。

• package.json目录下执行 npm install
• package.json

{
  "name": "mybook",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "dependencies": {
    "@babel/runtime": "^7.0.0-beta.51",
    "jquery": "^3.3.1"
  },
  "devDependencies": {
    "@babel/core": "^7.0.0-beta.51",
    "@babel/plugin-transform-runtime": "^7.0.0-beta.51",
    "@babel/preset-env": "^7.0.0-beta.51",
    "babel-loader": "^8.0.0-beta.0",
    "babel-preset-env": "^1.7.0",
    "clean-webpack-plugin": "^0.1.19",
    "copy-webpack-plugin": "^4.5.1",
    "css-loader": "^0.28.11",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "file-loader": "^1.1.11",
    "html-webpack-plugin": "^3.2.0",
    "style-loader": "^0.21.0",
    "webpack": "^4.12.0",
    "webpack-cli": "^3.0.6",
    "webpack-dev-server": "^3.1.4",
    "webpack-merge": "^4.1.3",
    "uglifyjs-webpack-plugin": "^2.1.2"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config webpack.prod.js",
    "start": "webpack-dev-server --open --config webpack.dev.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

配置

• 创建三个配置文件，（生成和开发中需要调用不同的配置文件）

webpack.common.js 开发/生成均要调用
webpack.dev.js 开发环境时调用
webpack.prod.js 生产环境时调用

• webpack.dev.js

//webpack.dev.js
 const merge = require('webpack-merge');
 const common = require('./webpack.common.js');

 module.exports = merge(common, {
     devtool: 'inline-source-map',
     devServer: {
         contentBase: './dist',
         port: 80, //端口号
     },
 });

• webpack.prod.js

//webpack.prod.js
const merge = require('webpack-merge');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin'); //清空目录
const common = require('./webpack.common.js');

module.exports = merge(common, {
    devtool: 'source-map', //开启生成代码映射文件功能
    plugins: [
        new UglifyJSPlugin({sourceMap: true}),
        new CleanWebpackPlugin(['dist']), //清理 dist 目录
    ]
});

webpack.common.js
//webpack.common.js
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin'); //生成html
const ExtractTextPlugin = require("extract-text-webpack-plugin"); //将css作为单独文件
const CopyWebpackPlugin = require('copy-webpack-plugin'); //复制文件

module.exports = {
    entry: { // 入口
        index: './js/main.js',
        home: './js/home.js'
    },
    output: { //   文件输出
        path: path.resolve(__dirname, 'dist'),
        filename: 'js/[name].[chunkhash].js',
    },
    module: {
        rules: [
            { //配置 css-loader
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    fallback: "style-loader",
                    use: [{
                        loader: "css-loader",
                        options: {
                            minimize: true, //压缩css
                        }
                    }]
                })
            },
            { // 配置 babel-loader
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/, //此模块中的js不转码
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env'],
                        cacheDirectory: true, //缓存转换结果以提高执行效率
                        plugins: ["@babel/plugin-transform-runtime"]
                    }
                }
            }
        ]
    },
    // 插件
    plugins: [
        // 自动生成HTML文件,可以生成多个
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: 'index.html', //指定html模板
            chunks: ['index'], //指定要包含那些打包后的js
            hash: true,
            inject: true,
            minify: {
                removeComments: true,
                collapseWhitespace: true,
                removeAttributeQuotes: true
            },

        }),
        new HtmlWebpackPlugin({
            filename: 'home.html',
            template: 'home.html',
            chunks: ['home'],
            hash: true,
            inject: true,
            minify: {
                removeComments: true,
                collapseWhitespace: true,
                removeAttributeQuotes: true
            },
        }),
        new ExtractTextPlugin("css/[name].[chunkhash].css"),
        //复制图片目录
        new CopyWebpackPlugin([{
                from: './img',
                to: 'img'
            }, //拷贝图片目录
            {from: './iconfont',to: 'iconfont'}  //拷贝字体图片库
        ]),
    
        // 如果在js中使用到了 jquery 就导入jquery的包
        new webpack.ProvidePlugin({
            jqyery: 'jquery',
            $: 'jquery'
        })
    ],
};

页面中所要使用到的css文件使用import 'style.css’引入到html对应的 xxx.js文件中

启动
进入项目根目录执行命令 npm start

打包部署项目
进入项目根目录执行命令 npm run build
打包后的文件会放在dist目录

img，iconfont 目录中文件只是拷贝到 dist 目录。 iconfont 目录中所包含的CSS并没有被压缩，如有需要可自行压缩，并且CSS文件也需要手动引入到 html 文档中。