webpack的配置

Posted 2020-08-21 Tech 侠

使用webpack工具需要配置一个根目录下的配置文件，文件名默认为webpack.condfig.js，配置文件导出一个模块对象，包含了webpack工具的相关配置参数，这个模块对象将会以参数形式被引用。

参数 ： entry 

该参数对象指明了入口文件的配置:

 //页面入口文件配置
    entry: {
        demo : [baseUrl + "demo.js"],
    },

 

参数 : output

该参数对象指明了文件被工具经过打包等操作后的输出配置，包括输出的文件的存放位置和文件名称等:

   //文件输出配置
    output: {
        path: ‘src/js‘,
        filename: ‘[name].js‘,
    },

 

参数 : plugins

该参数对象指明了工具将应用上哪些插件，每个插件都被封装为一个类，引用时需要new生产，例如：

• webpack/lib/optimize/CommonsChunkPlugin:该插件用于封装文件间公共复用的部分，使代码更合理，简洁。

• webpack.ProvidePlugin: 该插件用于为了避免重复在每个模块里重复require我们需要的库，集中设置这些引用的库并直接使用在每个模块中。

 //插件项
    plugins: [
        new CommonsChunkPlugin("common.js"),
        new webpack.ProvidePlugin({
        $ : "jquery",
        }),
    ],

 

参数 : module

该参数对象指明了相关加载器配置，加载器非常有用，它保证了工具对现有的前端资源的扩展性，它可以加载并解析各种前端资源，相应的加载器需要npm install安装。

module: {
        //加载器配置
        loaders: [
            { test: /\.css$/, loader: ‘style-loader!css-loader‘ },
            { test: /\.(js|jsx)$/, loader: ‘jsx-loader?harmony‘ },
            { test: /\.scss$/, loader: ‘style!css!sass?sourceMap‘},
            { test: /\.(png|jpg)$/, loader: ‘url-loader?limit=25000‘},
            { test: /\.(hbs|html)$/, loader: "handlebars"},

        ]
    },

 

参数 : resolve

该参数指明了其他基本配置，

  resolve: {
        //查找module的话从这里开始查找
        root: ‘E:/github/flux-example/src‘, //绝对路径
        //自动扩展文件后缀名，意味着我们require模块可以省略不写后缀名
        extensions: [‘‘, ‘.js‘, ‘.json‘, ‘.scss‘],
        //模块别名定义，方便后续直接引用别名，无须多写长长的地址
        alias: {
            AppStore : ‘js/stores/AppStores.js‘,//后续直接 require(‘AppStore‘) 即可，
            ActionType : ‘js/actions/ActionType.js‘,
            AppAction : ‘js/actions/AppAction.js‘
        }
    }

 

全部代码：

var webpack = require(‘webpack‘);
var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");
var baseUrl = "./src/dev/pactions/";
module.exports = {

    //页面入口文件配置
    entry: {
        demo : [baseUrl + "demo.js"],
    },

    //文件输出配置
    output: {
        path: ‘src/js‘,
        filename: ‘[name].js‘,
    },

    //插件项
    plugins: [
        new CommonsChunkPlugin("common.js"),
        new webpack.ProvidePlugin({
        $ : "jquery",
        }),
    ],

    module: {
        //加载器配置
        loaders: [
            { test: /\.css$/, loader: ‘style-loader!css-loader‘ },
            { test: /\.js$/, loader: ‘jsx-loader?harmony‘ },
            { test: /\.scss$/, loader: ‘style!css!sass?sourceMap‘},
            { test: /\.(png|jpg)$/, loader: ‘url-loader?limit=4096‘},
            {test: require.resolve(‘jquery‘), loader: ‘expose-loader?$‘},
        ]
    },
    //其它解决方案配置
    resolve: {
        root:‘G:/baseNode/baseNd/baseNd/views‘, //绝对路径
        extensions: [‘‘, ‘.js‘, ‘.json‘, ‘.scss‘],
        alias: {
            AppStore : ‘js/stores/AppStores.js‘,
            ActionType : ‘js/actions/ActionType.js‘,
            AppAction : ‘js/actions/AppAction.js‘
        }
    }
};