webpack的简单配置(一)

开始

首先生成一个项目 npm init
安装webpack以及webpack-dev-server

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

(由于使用了之前的老静态页面做练习,只是简单的打包了css,js以及一些静态文件)
需要安装的依赖有:css-loader、style-loader、extract-text-webpack-plugin(该插件可以使散落的css文件打包成一个css,在首页使用link引入)、file-loader、url-loader、webpack-merge、html-webpack-plugin(用于生成html模板)

然后在package.json文件的script中配置开启以及打包的内容

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

在这里需要创建两个文件:一个是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 ...()的方法将其导出

最后在需要打包的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代码压缩