Webpack（一）前端项目打包配置

前提

全局环境下安装 nodejs

使用

1、安装依赖包

如果项目没有npm管理，即没有package.json文件

初始化项目为nodejs项目

npm init

• 输入必要信息
• 生成package.json文件

安装webpack依赖

cnpm install webpack --save -dev

• –save：表示在安装的同时，将依赖包写入package.json中
• -dev:表示将依赖写在devDependency（开发依赖包）中

安装Loader，style，css，svg，url，file，font-awesome以及postCss

cnpm install style-loader css-loader svg-url-loader url-loader file-loader font-awesome-webpack postcss-webpack --save -dev

• style-loader :处理位于页面内的style标签中的css

• css-loader ：处理css文件中的url（这种写法是为了将css与js分开打包，利用插件ExtractTextPlugin）

            {
                test: /\.css$/,
                loader: ExtractTextPlugin.extract({
                    fallback: "style-loader",
                    use: "css-loader"
                })
},

• svg-url-loader ：svg图片处理

            {
                test: /\.(svg|eot|woff|ttf)\w*/,
                loader: 'file-loader?outputPath=fonts/&name=[name].[ext]'
},

• url-loader ：

  • 1.文件大小小于limit参数，url-loader将会把文件转为DataURL；
  • 2.文件大小大于limit，url-loader会调用file-loader进行处理，参数也会直接传给file-loader。有参数

{
                test: /\.(png|jpg|gif)$/,
                loader: 'url-loader?limit=8192&name=css/images/[name].[ext]'
},

• file-loader ：解析项目中的url引入（不仅限于css），根据我们的配置，将图片拷贝到相应的路径，再根据我们的配置，修改打包后文件引用路径，使之指向正确的文件。有参数

{
                test: /\.xsl$/,
                loader: "file-loader?name=[name].[ext]"
}

• url-loader和file-loader涉及到了4个参数：limit、name、outputPath、publicPath。

  • 其中limit已经说明过，告诉url-loader，在文件小于多少个字节时，将文件编码并返回DataURL。

  • file-loader相关的是name、outputPath和publicPath。下面解释一下这3个参数

    • name表示输出的文件名规则，如果不添加这个参数，输出的就是默认值：文件哈希。
    • 加上[path]表示输出文件的相对路径与当前文件相对路径相同，加上[name].[ext]则表示输出文件的名字和扩展名与当前相同。

    • 加上[path]这个参数后，打包后文件中引用文件的路径也会加上这个相对路径。

    • outputPath表示输出文件路径前缀。

    • 图片经过url-loader打包都会打包到指定的输出文件夹下。
    • 但是我们可以指定图片在输出文件夹下的路径。

    • 比如outputPath=img/，图片被打包时，就会在输出文件夹下新建（如果没有）一个名为img的文件夹，把图片放到里

    • publicPath表示打包文件中引用文件的路径前缀

    • 如果你的图片存放在CDN上，那么你上线时可以加上这个参数，值为CDN地址，这样就可以让项目上线后的资源引用路径指向CDN了。
• font-awesome-webpack :处理字体文件
• postcss-webpack
• extract-text-webpack-plugin ：将css与js分开打包
• clean-webpack-plugin ：在打包前清空目标文件夹
• copy-webpack-plugin ：直接复制文件或文件夹到目标目录

如果项目已经被npm管理，即包含package.json文件

• 直接安装所有依赖

cnpm install

2、配置文件 webpack.config.js

• 首先新建入口文件 index.js
  

  引入各种需要的js和css等文件

require('./js/lib/jquery/jquery.js');
require('./js/lib/jquery/jquery-1.9.1.min.js');
require('./js/lib/jquery/jquery.colorbox.js');

require('./js/common/common.js');
require('./js/main.js');
require('./js/carousel.js');
// require('./js/MathJax/MathJax.js?config=TeX-AMS-MML_HTMLorMML');

require('./css/iconfont.css');
require('./css/colorbox.css');
require('./css/by.css');
require('./css/jo-dhh.css');

require('./xslt/jats2html.xsl');

• 引入webpack包

var webpack = require("webpack");

• 设置打包入口，和输出路径、文件名称
  

  __dirname为当前目录

entry: {
        index: __dirname + "/index.js",
        // vendor:['jQuery'],
    },
    output: {
        path: __dirname + "/dist",
        //打包后的文件存放的地方
        filename: "bundle.js"
    },

• 为了将js与css分开打包，需要引入插件extract-text-webpack-plugin

var ExtractTextPlugin = require("extract-text-webpack-plugin");

在module中的loader参数中，对css的处理部分修改为

{
                test: /\.css$/,
                loader: ExtractTextPlugin.extract({
                    fallback: "style-loader",
                    use: "css-loader"
                })
},

在plugins中添加css文件打包后的输出路径和文件名

new ExtractTextPlugin("style.css")

说明：这里如果不将参数格式显示设置为fallback，use格式，后面在打包时会报css文件错误

• 对图片进行处理
  

  图片有三种处理方式，一种图片是在css中被设置为背景样式，这里可以直接识别并放入目标文件夹；

{
                test: /\.(png|jpg|gif)$/,
                loader: 'file-loader?name=images/[name].[ext]'
},

另一种是在html中通过img标签的src引入，因为webpack对html支持不友好，所以需要借助插件html-webpack-plugin

第三种是借用拷贝插件，直接强行拷贝所有图片，因为本项目图片是在xslt中引用，所以采用第三种和第一种结合的方式处理图片，在plugin参数中添加

new CopyWebpackPlugin([
            {
                from: 'css/images',
                to: 'images'
            },
            {
                from: 'xmlsample',
                to: 'xmlsample'
            },
            {
                from: 'js/MathJax',
                to: 'MathJax'
            }

]),

• 对字体文件处理
  

  这里需要注意：字体文件的css样式和其余资源文件的路径对应问题

{
                test: /\.(svg|eot|woff|ttf)\w*/,
                loader: 'file-loader?outputPath=fonts/&name=[name].[ext]'
            },

• 其余格式文件处理，项目主要是利用xslt对xml进行转换，所以需要将xslt也进行处理

{
                test: /\.xsl$/,
                loader: "file-loader?name=[name].[ext]"
}

• 因为涉及到多个文件打包成一个文件，所以开启source-map映射，方便调试，发布版本可以关闭该功能

devtool: 'source-map',

• 拷贝其余文件

var CopyWebpackPlugin = require("copy-webpack-plugin");

new CopyWebpackPlugin([
            {
                from: 'css/images',
                to: 'images'
            },
            {
                from: 'xmlsample',
                to: 'xmlsample'
            },
            {
                from: 'js/MathJax',
                to: 'MathJax'
            }

        ]),

• 因为每次打包结果可能都不一样，所以每次打包之前需要手动删除dist文件夹，不太方便，在网上找到一款可以自动删除目标文件夹的插件
  

  懒惰才是最大生产力哈哈哈

var CleanWebpackPlugin = require("clean-webpack-plugin");

new CleanWebpackPlugin(
            ['dist'],
            {
                root: __dirname,       　　　　　　　　　　//根目录
                verbose: true,        　　　　　　　　　　//开启在控制台输出信息
                dry: false        　　　　　　　　　　//启用删除文件
            })

• 配置文件代码

var webpack = require("webpack");
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var CopyWebpackPlugin = require("copy-webpack-plugin");
var CleanWebpackPlugin = require("clean-webpack-plugin");

module.exports = {
    entry: {
        index: __dirname + "/index.js",
        // vendor:['jQuery'],
    },
    output: {
        path: __dirname + "/dist",
        //打包后的文件存放的地方
        filename: "bundle.js"
    },
    module: {
        loaders: [
            {
                test: /\.css$/,
                loader: ExtractTextPlugin.extract({
                    fallback: "style-loader",
                    use: "css-loader"
                })
            },
            // [hash:8]
            // {
            //     test: /\.(png|jpg|gif)$/,
            //     loader: 'url-loader?limit=8192&name=css/images/[name].[ext]'
            // },
            {
                test: /\.(png|jpg|gif)$/,
                loader: 'file-loader?name=images/[name].[ext]'
            },
            {
                test: /\.(svg|eot|woff|ttf)\w*/,
                loader: 'file-loader?outputPath=fonts/&name=[name].[ext]'
            },
            {
                test: /\.xsl$/,
                loader: "file-loader?name=[name].[ext]"
            }
        ]
    },
    devtool: 'source-map',
    plugins: [
        new ExtractTextPlugin("style.css"),
        // new webpack.optimize.CommonsChunkPlugin({
        //     names: ['vendor', 'manifest'],
        // }),
        new CopyWebpackPlugin([
            {
                from: 'css/images',
                to: 'images'
            },
            {
                from: 'xmlsample',
                to: 'xmlsample'
            },
            {
                from: 'js/MathJax',
                to: 'MathJax'
            }

        ]),
        new CleanWebpackPlugin(
            ['dist'],
            {
                root: __dirname,       　　　　　　　　　　//根目录
                verbose: true,        　　　　　　　　　　//开启在控制台输出信息
                dry: false        　　　　　　　　　　//启用删除文件
            })
    ]
}