首页 > 代码库 > webpack的配置

webpack的配置

2024-08-23 11:13:05   221人阅读

使用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‘        }    }};
 


webpack的配置






























        

            
                
                  
                
                

                    联系

                    我们