基于webpack.config.js 参数详解

var webpack = require('webpack');
module.exports = {
 entry: [
  'webpack/hot/only-dev-server',
  './js/app.js'
 ],
 output: {
  path: './build',
  filename: 'bundle.js'
 },
 module: {
  loaders: [
  { test: /\.js"style!css" },
  {test: /\.less/,loader: 'style-loader!css-loader!less-loader'}
  ]
 },
 resolve:{
  extensions:['','.js','.json']
 },
 plugins: [
  new webpack.NoErrorsPlugin()
 ]
};

entry: './js/main.js'

entry: [
  'webpack/hot/only-dev-server',
  './js/app.js'

 entry: {
  hello: './js/hello.js',
  form: './js/form.js'
 }

 output: {
  path: './build',
  filename: 'bundle.js'
 }

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

{ test: /\.(png|jpg)$/,loader: 'url-loader"htmlcode">

 require('./bootstrap.css');
 require('./myapp.less');
 var img = document.createElement('img');
 img.src = require('./glyph.png');


但是需要知道的是，这样require来的文件会内联到 js bundle中。如果我们需要把保留require的写法又想把css文件单独拿出来，可以使用下面提到的[extract-text-webpack-plugin]插件。
在上面示例代码中配置的第一个loaders我们可以看到一个叫做react-hot的加载器。我的项目是用来学习react写相关代码的，所以配置了一个react-hot加载器，通过它，可以实现对react组件的热替换。我们已经在entry参数中配置了webpack/hot/only-dev-server,所以我们只要在启动webpack开发服务器时开启–hot参数，就可以使用react-hot-loader了。在package.json文件中这样定义：


"scripts": {
  "start": "webpack-dev-server --hot --progress --colors",
  "build": "webpack --progress --colors"
 }


4.resolve
webpack在构建包的时候会按目录的进行文件的查找，resolve属性中的extensions数组中用于配置程序可以自行补全哪些文件后缀：


 resolve:{
  extensions:['','.js','.json']
 }


然后我们想要加载一个js文件时，只要require(‘common')就可以加载common.js文件了。
6.externals
当我们想在项目中require一些其他的类库或者API，而又不想让这些类库的源码被构建到运行时文件中，这在实际开发中很有必要。此时我们就可以通过配置externals参数来解决这个问题：


 externals: {
  "jquery": "jQuery"
 }


这样我们就可以放心的在项目中使用这些API了：var jQuery = require(“jquery”);
7.context
当我们在require一个模块的时候，如果在require中包含变量，像这样：


require("./mods/" + name + ".js");


那么在编译的时候我们是不能知道具体的模块的。但这个时候，webpack也会为我们做些分析工作：
1.分析目录：'./mods'；
2.提取正则表达式：'/^.*.js$/'；
于是这个时候为了更好地配合wenpack进行编译，我们可以给它指明路径，像在cake-webpack-config中所做的那样（我们在这里先忽略abcoption的作用）：


 var currentBase = process.cwd();
 var context = abcOptions.options.context ? abcOptions.options.context : 
 path.isAbsolute(entryDir) ? entryDir : path.join(currentBase, entryDir);


以上这篇基于webpack.config.js 参数详解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。