開始

首先生成一個項目 npm init
安裝webpack以及webpack-dev-server

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

(由于使用了之前的老靜態(tài)頁面做練習,只是簡單的打包了css,js以及一些靜態(tài)文件)
需要安裝的依賴有:css-loader、style-loader、extract-text-webpack-plugin(該插件可以使散落的css文件打包成一個css,在首頁使用link引入)、file-loader、url-loader、webpack-merge、html-webpack-plugin(用于生成html模板)

然后在package.json文件的script中配置開啟以及打包的內(nèi)容

"dev": "webpack-dev-server  --open  --config  webpack.config.js"
"build": "webpack --progress --hide-modules --config build.js"

在這里需要創(chuàng)建兩個文件:一個是webpack.config.js以及build.js

在webpack.config.js文件中：

const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

const config = {
    entry: {
        main: './main'
    },
    output: {
        path: path.join(__dirname, './distdoc'),
        publicPath: '/distdoc/',
        filename: 'main.js'
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    publicPath: './',
                    use: 'css-loader?minimize',
                    fallback: 'style-loader'
                })
            },
            {
        test: /\.(gif|jpg|png|woff|svg|eot|ttf)\??.*$/,
        loader:'url-loader?limit=1024&name=distdoc/[hash].[ext]'
         }
        ]
    },
    plugins: [
        new ExtractTextPlugin('main.css')
    ]
};

module.exports = config;

在這里需要在配置css中加上publicPath: './' 讓css中的資源地址為相對路徑，css-loader后面加上minimize使打包后的css代碼壓縮，入口文件為當下的main.js，需要配置main.js，出口文件則配置為distdoc文件夾下面的main.js(自動生成)

在main.js中 把我們需要打包編譯的文件加上

import './css/reset.css'
import './css/index.css'
import func from './js/func.js'
import JSONdate from './js/JSONdate.js'
func();
JSONdate();

后面的js文件 我們使用export default function ...()的方法將其導(dǎo)出

最后在需要打包的build.js文件中

const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const merge = require('webpack-merge')
const webpackBaseConfig = require('./webpack.config')

webpackBaseConfig.plugins = []

module.exports = merge(webpackBaseConfig, {
    output: {
        publicPath: '/distdoc/',
        filename: '[name].js'
    },
    plugins: [
        new ExtractTextPlugin({
            filename: '[name].css',
            allChunks: true
        }),
        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: '"production"'
            }
        }),
        new webpack.optimize.UglifyJsPlugin({ 
            compress: {
                warnings: false
            }
        }),
        new HtmlWebpackPlugin({
            filename: '../index_pro.html',
            template: './index.html',
            inject: false
        })
    ]

})

我們將其打包的文件為index_pro.html，模板為index.html，配置webpack.optimize.UglifyJsPlugin讓打包后的js代碼壓縮