webpack学习教程小记

webpack小记

webpack配置中的 entry与output

entry :

entry 是表示打包的入口文件、就是说从哪个文件开始打包

• webpack 的配置有三种形式:

  • 字符串形式

  • 数组形式

  • 对象形式

entry:'./main.js'

将mina.js 和jquery.js 打包到bundle.js 输出

//将mina.js 和jquery.js 打包到bundle.js 输出
{
  entry: ['main.js', 'jquery.js'],
  output: {
    path: './dist',
    filename: "bundle.js"
  }
}

设置多个打包目标文件。每一对键值对都对应着一个入口文件

  entry: {   
    main: 'main.js',  
    a: 'a.js'   
    },   
    output: {  
    path: './dist/',   
    filename: '[name].js'  
    }  

output

output里filename有三个值

• [name]是文件名字是entry的键值。

• [hash]是md5加密的值。

• [chunkhash]这里是作为版本号使用。

module.exports = {
    entry: {
        app: './main.js'
    },
    output: {
        filename: '[name]-[hash].js',
        path: __dirname + '/dist'
    }
};

plugin插件配置

使用install html-webpack-plugin插件，安装npm install html-webpack-plugin --save-dev，可以生产出对应的打包html输出、并且可以设计模板页面的一些变量参数、

  plugins: [
        new htmlWebpackPlugin({
            filename: 'index.html',
            title:"webpack test demo"
        })
    ]

• title: 用来生成页面的 title 元素

• filename: 输出的 HTML 文件名，默认是 index.html, 也可以直接配置带有子目录。

• template: 模板文件路径，支持加载器，比如 html!./index.html

• inject: true | 'head' | 'body' | false ,注入所有的资源到特定的 template 或者

• templateContent 中，如果设置为 true 或者 body，所有的 javascript 资源将被放置到 body 元素的底部，'head' 将放置到 head 元素中。

• favicon: 添加特定的 favicon 路径到输出的 HTML 文件中。

• minify: {} | false , 传递 html-minifier 选项给 minify 输出

• hash: true | false, 如果为 true, 将添加一个唯一的 webpack 编译 hash 到所有包含的脚本和 CSS 文件，对于解除 cache 很有用。

• cache: true | false，如果为 true, 这是默认值，仅仅在文件修改之后才会发布文件。

• showErrors: true | false, 如果为 true, 这是默认值，错误信息会写入到 HTML 页面中

• chunks: 允许只添加某些块 (比如，仅仅 unit test 块)

• chunksSortMode: 允许控制块在添加到页面之前的排序方式，支持的值：'none' | 'default' | {function}-default:'auto'

• excludeChunks: 允许跳过某些块，(比如，跳过单元测试的块)

chunks说明

• 可以将不同的打包chunk 加载到不同的页面中去，当index.html 首页需要common.js 和index.js时可用chunk

 new htmlWebpackPlugin({
      filename: __dirname + '/dist/index.html',
      template: 'html-withimg-loader!' +"./index.html",
      chunks:['index','main']
    }),

代码压缩:

webpack 自带了一个压缩插件 UglifyJsPlugin，只需要在plugins配置文件中引入即可使用、压缩JS 代码

new webpack.optimize.UglifyJsPlugin({
    compress: {
        warnings: false
        }
})

配置压缩css代码

{
loader: "css-loader",
options: {
    minimize: true //css压缩
    }
}

webpack对样式的处理

需要引入css-loader和style-loader，其中css-loader用于解析，而style-loader则将解析后的样式嵌入js代码。

{
  module: {
    loaders: [
      { test: /\.$/, loader: "style-loader!css-loader!less-loader" }
    ]
  }
}

将样式抽取出来为独立的文件

将样式抽取成独立的文件。使用的插件就是extract-text-webpack-plugin

   rules: [{
       test: /\.css$/,
       use: ExtractTextPlugin.extract({
           fallback: "style-loader",
           use: [{
               loader: "css-loader",
               options: {
                   // modules: true // 设置css模块化,
                   minimize: true //css压缩
               }
           }, {
               loader: "postcss-loader",
               // 在这里进行配置，也可以在postcss.config.js中进行配置，
               options: {
                   plugins: function() {
                       return [require("autoprefixer")];
                   }
               }
           }]
       })
   }]

样式压缩

压缩代码我们可以使用webpack的内置插件UglifyJsPlugin来做，它既可以压缩js代码也可以压缩css代码。

plugins: [
  ...
  new webpack.optimize.UglifyJsPlugin({
    compress: {
      warnings: false
    }
  }),
  ...
]

图片文件字体文件压缩

图片文件压缩成base64 可以设置被压缩图片的大小才什么范围内才进行压缩limit: 1000,

 {
     test: /\.(png|gif|jpe?g)$/,
     loader: "url-loader",
     query: {
         /*
          *  limit=10000 ： 10kb
          *  图片大小小于10kb 采用内联的形式，否则输出图片
          * */
         limit: 1000,
         name: "images/[name]-[hash:8].[ext]"
     }
 }, {
     //文件加载器，处理文件静态资源
     test: /\.(woff|woff2|ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
     loader: 'file-loader?name=./fonts/[name]-[hash:8].[ext]'
 }

其实并不能说是在压缩css代码，本质来说还是压缩js代码，再将这块代码输出到css文件中。

以下为一个demo配置:webpack.config.js

const webpack = require("webpack");
const htmlWebpackPlugin = require("html-webpack-plugin");
const ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
    entry: {
        main: "./src/main.js"
    },
    output: {
        filename: "js/[name].js",
        path: __dirname + "/dist/"
    },
    module: {
        /* 在webpack2.0版本已经将 module.loaders 改为 module.rules 为了兼容性考虑以前的声明方法任然可用，同时链式loader(用!连接)只适用于module.loader
            同时-loader不可省略 */
        rules: [{
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    fallback: "style-loader",
                    use: [{
                            loader: "css-loader",
                            options: {
                                // modules: true // 设置css模块化,
                                //  minimize: true //css压缩
                            }
                        },
                        {
                            loader: "postcss-loader",
                            // 在这里进行配置，也可以在postcss.config.js中进行配置，
                            options: {
                                plugins: function() {
                                    return [require("autoprefixer")];
                                }
                            }
                        }
                    ]
                })
            },
            {
                test: /\.(png|gif|jpe?g)$/,
                loader: "url-loader",
                query: {
                    /*
                     *  limit=10000 ： 10kb
                     *  图片大小小于10kb 采用内联的形式，否则输出图片
                     * */
                    limit: 1000,
                    name: "images/[name]-[hash:8].[ext]"
                }
            },
            {
                //文件加载器，处理文件静态资源
                test: /\.(woff|woff2|ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                loader: 'file-loader?name=./fonts/[name]-[hash:8].[ext]'
            },
            {
                test: /\.styl(us)?$/,
                use: ExtractTextPlugin.extract({
                    fallback: "style-loader",
                    use: [
                        "css-loader",
                        {
                            loader: "postcss-loader",
                            options: {
                                plugins: function() {
                                    return [require("autoprefixer")];
                                }
                            }
                        },
                        "stylus-loader"
                    ]
                })
            },
            {
                test: /\.js$/,
                loader: "babel-loader", //此处不能用use，不知道为啥
                exclude: /node_modules/ //需要排除的目录
            }
        ]
    },
    plugins: [
        new htmlWebpackPlugin({
            filename: "index.html",
            title: "webpack test demo"
        }),
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false
            }
        }),
        new ExtractTextPlugin("css/[name].css")
    ]
};