Webpack前端项目打包配置

2018-07-08 本文已影响0人 Brandon_x

前提

全局环境下安装 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样式和其余资源文件的路径对应问题

如果css是与其余的css一起打包，那么其中对fonts资源的引用路径也会自动发生变化，一定注意，是个大坑！！

{
                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        　　　　　　　　　　//启用删除文件
            })
    ]
}

Webpack前端项目打包配置

前提

使用

2、配置文件 webpack.config.js

猜你喜欢

热点阅读