webpack笔记

最后更新于:2018-04-24 06:41:09

webpack学习笔记

基础

概念

本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle。

打包所有的资源样式图片脚本

webpack

安装

  • webpack依赖于nodenpm
// 初始化一个项目
npm init
// 安装webpack
npm install webpack webpack-dev-server -D

devDependencies文件中存在即安装成功。

四个核心概念

入口

告诉webpack从哪里开始寻找依赖,并且编译。

出口

用来配置编译后的文件存储位置和文件名。

loader

webpack里,每一个文件都是一个模块,比如.css,.html,.js,.jpg,.less等。对于不同的模块,需要用不同的加载器来处理,这个加载器就是loader。

  • test:匹配的文件
  • use: 值可以是数组或者字符串,如果是数组,编译顺序是从后往前

插件

扩展

基本实例

let path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

let config = {
    entry: {
        main: './main.js'
    },
    output: {
        path: path.join(__dirname, './list'),
        publicPath: '/list/',
        filename: 'list.js'
    },
    module: {
        rules: [{
                test: /.vue$/,
                loader: 'vue-loader',
                options: {
                    css: ExtractTextPlugin.extract({
                        use: 'css-loader',
                        fallback: 'vue-style-loader'
                    })
                }
            },
            {
                test: /.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            },
            {
                test: /.css$/,
                use: ExtractTextPlugin.extract({
                    use: 'css-loader',
                    fallback: 'style-loader'
                })
            },
            {
                test: /\.(gif|jpg|png|woff|svg|ttf|eot)\??.*$/,
                loader: 'url-loader?limit=1024'
            }
        ]
    },
    plugins: [
        new ExtractTextPlugin('main.css')
    ]
}

module.exports = config;