使用WebPack打包

环境配置

安装淘宝镜像

npm install -g cnpm --registry=https://registry.npm.taobao.org #安装淘宝镜像
cnpm -v   #查看版本

Webpack安装

#//全局安装
cnpm install -g webpack
#//安装到你的项目目录
cnpm install --save-dev webpack

项目配置

项目初始化

#自动创建这个package.json
cnpm init

#安装Webpack
cnpm install --save-dev webpack 

Demo配置

{
  "name": "jswebpack",
  "version": "1.0.0",
  "description": "a demo about webpack",
  "main": "index.js",
  "scripts": {
    "watch": "webpack --progress --colors --config webpack.dev.config.js --watch",
    "build": "webpack --display-error-details --config webpack.dev.config.js",
    "deploy": "webpack --display-error-details --config webpack.pro.config.js"
  },
  "author": "Tan",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-eslint": "^8.2.1",
    "babel-loader": "^7.1.2",
    "babel-polyfill": "^6.26.0",
    "babel-preset-env": "^1.6.1",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "clean-webpack-plugin": "^0.1.18",
    "extract-text-webpack-plugin": "^3.0.2",
    "file-loader": "^1.1.6",
    "html-webpack-plugin": "^2.30.1",
    "image-webpack-loader": "^4.0.0",
    "jquery-validation": "^1.17.0",
    "lodash": "^4.17.4",
    "style-loader": "^0.20.1",
    "url-loader": "^0.6.2",
    "webpack": "^3.10.0"
  }
}

开发环境

webpack.dev.config.js

const webpack = require('webpack'); //访问内置的插件
const path = require('path'); //node path
const CleanWebpackPlugin = require('clean-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
//const HtmlWebpackPlugin = require('html-webpack-plugin');

/**
 * 开发环境
 * @since  2018-02-01 17:29:38
 * @author Tan<tandamailzone@gmail.com>
 */
const config = {
    //入口文件
    entry: {
        index: __dirname + '/script/index.js',
        detail: __dirname + '/script/detail.js',
        //部分通用的第三方库
        vendor: [
            __dirname + '/script/module/rem.js',
            __dirname + '/script/vendor/jquery.cookie.js',
        ]
    },
    //输入文件
    output: {
        filename: 'script/[name].js', //打包后输出文件的文件名
        path: path.resolve(__dirname, 'assets/src/') //打包后的文件存放的地方
    },
    //通过AMD方式载入全局配置
    externals: {
        jquery: 'window.$'
    },
    //开启sourceMap, 生成一个 DataUrl 形式的 SourceMap 文件.
    devtool: 'inline-source-map',

    //加载器
    module: {
        loaders: [
            {
                //CSS加载器(css-loader)
                test: /.css$/,
                loader: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: [
                        {
                            loader: 'css-loader',
                            options: {
                                minimize: true //css压缩
                            }
                        }
                    ],
                    publicPath: '../'
                })
            },
            {
                //JS加载器(babel-loader)
                test: /.js$/,
                include: [
                    // 只去解析运行目录下的 src 和 demo 文件夹
                    path.join(process.cwd(), './js')
                ],
                loader: 'babel-loader',
                query: {
                    presets: ['es2015'],
                }
            },
            {
                //图片资源加载器(url-loader)
                test: /.(png|jpg|gif|svg)$/,
                loader: 'url-loader?limit=10240&name=image/[name].[ext]'
            },
            {
                //字体资源加载器(url-loader)
                test: /.(woff)|(svg)|(eot)|(ttf)$/,
                loader: 'url-loader?limit=1024&name=font/[name].[ext]'
            }
        ]
    },

    plugins: [
       /* new htmlWebpackPlugin({
            template: 'index.html',
            filename: 'index.html'
        }),*/
        //合并压缩css
        new ExtractTextPlugin({
            filename: 'style/[name].css'
        }),
        // 构建优化插件-提取公共代码
        new webpack.optimize.CommonsChunkPlugin({
            //common指引入(import)的文件, vender指entry中的vender
            names: ['common', 'vendor'],
            //重复资源超过阀值及提出来到公共文件中去
            minChunks: 2
        }),
        //在building之前删除以前build过的文件或目录
        new CleanWebpackPlugin(['assets/src/script/*.js', 'assets/src/style/*.css'], {
            root: __dirname, //当前根目录
            verbose: true, //开启在控制台输出信息
            dry: false //启用删除文件
        })
    ]
}


module.exports = config;

生产环境

webpack.pro.config.js

const webpack = require('webpack'); //访问内置的插件
const path = require('path'); //node path
const CleanWebpackPlugin = require('clean-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
//const HtmlWebpackPlugin = require('html-webpack-plugin');


/**
 * 生产环境
 * @since  2018-02-01 17:29:38
 * @author Tan<tandamailzone@gmail.com>
 */
const config = {
    //入口文件
    entry: {
        index: __dirname + '/script/index.js',
        detail: __dirname + '/script/detail.js',
        //部分通用的第三方库
        vendor: [
            __dirname + '/script/module/rem.js',
            __dirname + '/script/vendor/jquery.cookie.js',
        ]
    },
    //输入文件
    output: {
        //打包后输出文件的文件名
        filename: 'script/[name].js',
        //打包后的文件存放的地方
        path: path.resolve(__dirname, 'assets/src/')
    },
    //通过AMD方式载入全局配置
    externals: {
        jquery: 'window.$'
    },

    //开启sourceMap, 生成一个 DataUrl 形式的 SourceMap 文件.
    devtool: 'inline-source-map',

    //加载器
    module: {
        loaders: [
            {
                //CSS加载器(css-loader)
                test: /.css$/,
                loader: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: [
                        {
                            loader: 'css-loader',
                            options: {
                                minimize: true //css压缩
                            }
                        }
                    ],
                    publicPath: '../'
                })
            },
            {
                //JS加载器(babel-loader)
                test: /.js$/,
                include: [
                    // 只去解析运行目录下的 src 和 demo 文件夹
                    path.join(process.cwd(), './js')
                ],
                loader: 'babel-loader',
                query: {
                    presets: ['es2015'],
                }
            },
            {
                //图片资源加载器(url-loader)
                test: /.(png|jpg|gif|svg)$/,
                loader: [
                    'url-loader?limit=10240&name=image/[name].[ext]',
                    'image-webpack-loader' //图片压缩
                ]
            },
            {
                //字体资源加载器(url-loader)
                test: /.(woff)|(svg)|(eot)|(ttf)$/,
                loader: 'url-loader?limit=1024&name=font/[name].[ext]'
            }
        ]
    },

    plugins: [
        //压缩js
        new webpack.optimize.UglifyJsPlugin(),
        //合并压缩css
        new ExtractTextPlugin({
            filename: 'style/[name].css'
        }),
        // 构建优化插件-提取公共代码
        new webpack.optimize.CommonsChunkPlugin({
            //common指引入(import)的文件, vender指entry中的vender
            names: ['common', 'vendor'],
            //重复资源超过阀值及提出来到公共文件中去
            minChunks: 2
        }),
        //在building之前删除以前build过的文件或目录
        new CleanWebpackPlugin(['assets/src/script/*.js', 'assets/src/style/*.css'], {
            root: __dirname, //当前根目录
            verbose: true, //开启在控制台输出信息
            dry: false //启用删除文件
        })
    ]
}


module.exports = config;

使用

#监听模式运行
cnpm run watch  

#开发环境
cnpm run build

#生产环境
cnpm run deploy