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

时间 2019-12-07 标签 webpack 前端项目打包配置

前提

全局环境下安装 nodejsjavascript

使用

一、安装依赖包

若是项目没有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标签中的csscss
css-loader ：处理css文件中的url（这种写法是为了将css与js分开打包，利用插件ExtractTextPlugin）html

{ 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 ：java
- 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。node
- 其中limit已经说明过，告诉url-loader，在文件小于多少个字节时，将文件编码并返回DataURL。
- file-loader相关的是name、outputPath和publicPath。下面解释一下这3个参数jquery
  - name表示输出的文件名规则，若是不添加这个参数，输出的就是默认值：文件哈希。
  - 加上[path]表示输出文件的相对路径与当前文件相对路径相同，加上[name].[ext]则表示输出文件的名字和扩展名与当前相同。
  - 加上[path]这个参数后，打包后文件中引用文件的路径也会加上这个相对路径。webpack
  - outputPath表示输出文件路径前缀。web
  - 图片通过url-loader打包都会打包到指定的输出文件夹下。
  - 可是咱们能够指定图片在输出文件夹下的路径。
  - 好比outputPath=img/，图片被打包时，就会在输出文件夹下新建（若是没有）一个名为img的文件夹，把图片放到里npm
  - publicPath表示打包文件中引用文件的路径前缀json
  - 若是你的图片存放在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

二、配置文件 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        　　　　　　　　　　//启用删除文件
            })
    ]
}