Webpack配置文件

Webpack 在执行的时候,除了在命令行传入参数,还可以通过指定的配置文件来执行。默认情况下,会搜索当前目录的webpack.config.js文件,这个文件是一个 node.js 模块,返回一个 json 格式的配置信息对象,或者通过--config选项来指定配置文件。

继续我们的案例,在根目录创建package.json来添加 webpack 需要的依赖:

{

    "name":"webpack-example",

    "version":"1.0.0",

    "description":"A simple webpack example.",

    "main":"bundle.js",

    "scripts": {

        "test":"echo \"Error: no test specified\" && exit 1"

    },

    "keywords": ["webpack"],

    "author":"zhaoda",

    "license":"MIT",

    "devDependencies": {

    "css-loader":"^0.21.0",

        "style-loader":"^0.13.0",

        "webpack":"^1.12.2"

    }

}

# 如果没有写入权限,请尝试如下代码更改权限chflags -R nouchg .sudochmod775package.json

别忘了运行npm install。

然后创建一个配置文件webpack.config.js:

{

    "name":"webpack-example",

    "version":"1.0.0",

    "description":"A simple webpack example.",

    "main":"bundle.js",

    "scripts": {

        "test":"echo \"Error: no test specified\" && exit 1"

    },

    "keywords": ["webpack"],

    "author":"zhaoda",

    "license":"MIT",

    "devDependencies": {

        "css-loader":"^0.21.0",

        "style-loader":"^0.13.0",

        "webpack":"^1.12.2"

    }

}

同时简化entry.js中的style.css加载方式:

require('./style.css')

最后运行webpack,可以看到 webpack 通过配置文件执行的结果和上一章节通过命令行webpack entry.js bundle.js --module-bind 'css=style-loader!css-loader'执行的结果是一样的。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容