webpack整体了解

一、下载

新建一个文件夹，在cmd中npm init->npm install->npm install webpack --save-dev

下载完成之后，新建一个webpack.config.js文件，在这个里面写配置

开始准备：http://www.cnblogs.com/GainLoss/p/7198953.html

webpack踩坑：http://www.cnblogs.com/GainLoss/p/7473585.html

vue+webpack：http://www.cnblogs.com/GainLoss/p/6592729.html

　　　　　　　http://www.cnblogs.com/GainLoss/p/6927626.html

二、基础

1.一个入口一个出口

2.多个入口多个出口

3.将第三方文件单独成一个文件夹

4.css文件 js文件 图片 压缩

三、功能

1.基本 一个入口一个出口 将ES6转成ES5

var path=require('path');
var HtmlWebpackPlugin=require('html-webpack-plugin')
module.exports={
    entry:{
        index:'index.js',
    },
    output:{
        path:path.resolve(__dirname,'dist'),
        filename:'[name].[hash].js',
    },
    resolve:{
        extensions:['.js'],//js文件引入的时候可以不用加后缀
    },
    module:{
        rules:[
            {
                test:/\.js$/,
                exclude:/node_modules/,
                loader:'babel-loader',
                query:{
                    presets:['es2015']
                }
            },
        ]
    },
    plugins:[
        new HtmlWebpackPlugin({
            template:'./index.html'
        }),
    ]
    
}

2.将css转成单独的文件

在cmd中下载 npm install style-loader css-loader --save-dev

...module
{
                test:/\.css$/,
                exclude:/node_modules/,
                loader:ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader' }),

},
...plugin中

　new ExtractTextPlugin('style.css'),

3.将代码中的图片转成base64

在 cmd中下载 npm install url-loader --save-dev

...module
{
                test:/\.(png|jpg|gif)$/,
                exclude:/node_modules/,
                loader:'url-loader'
}

4.将第三方插件单独成文件

module.exports={
    entry:{
        index:'index.js',
        vendor:['./web/jquery']
    },
    output:{
        path:path.resolve(__dirname,'dist'),
        filename:'[name].[hash].js',
    },
    resolve:{
        extensions:['.js'],
    },
    module:{
        rules:[
            ...
        ]
    },
    plugins:[
        ...new webpack.optimize.CommonsChunkPlugin({
            name:['vendor','manifest']
        }),
    ]  
}

5.实现多个入口文件

...
function getfile(){//这里面需要获取全部符合的文件
    var entry=[];
    glob.sync(__dirname+'/web/*.js').forEach(function(file){
        var name=file.split('main')[1]
        if(name){
            var filename=file.split('main')[0]+"main"+name;
            entry.push(filename)
        }
    })
    return entry
}
module.exports={
    entry:{
        index:getfile(),
        vendor:['./web/jquery']
    },
   ...
}

总的代码：

var path=require('path');
var HtmlWebpackPlugin=require('html-webpack-plugin')
var ExtractTextPlugin=require('extract-text-webpack-plugin')
var glob=require('glob')
var webpack=require('webpack')
var CleanWebpackplugin=require('clean-webpack-plugin')

function getfile(){
    var entry=[];
    glob.sync(__dirname+'/web/*.js').forEach(function(file){
        var name=file.split('main')[1]
        if(name){
            var filename=file.split('main')[0]+"main"+name;
            entry.push(filename)
        }
    })
    return entry
}

module.exports={
    entry:{
        index:getfile(),
        vendor:['./web/jquery']
    },
    output:{
        path:path.resolve(__dirname,'dist'),
        filename:'[name].[hash].js',
    },
    resolve:{
        extensions:['.js'],
    },
    module:{
        rules:[
            {
                test:/\.js$/,
                exclude:/node_modules/,
                loader:'babel-loader',
                query:{
                    presets:['es2015']
                }
            },
            {
                test:/\.css$/,
                exclude:/node_modules/,
                loader:ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader' }),
            },
            {
                test:/\.(png|jpg|gif)$/,
                exclude:/node_modules/,
                loader:'url-loader'
            }
        ]
    },
    plugins:[
        new HtmlWebpackPlugin({
            template:'./index.html'
        }),
        new ExtractTextPlugin('style.css'),
        new webpack.optimize.CommonsChunkPlugin({
            name:['vendor','manifest']
        }),
        new CleanWebpackplugin(
            ['dist/index.*.js'],
            {
                root:__dirname,
                verbose:true,
                dry:true
            }
        ),
    ]
    
}

 

转载于:https://www.cnblogs.com/GainLoss/p/7477700.html