{"id":322,"date":"2017-06-02T23:07:35","date_gmt":"2017-06-02T15:07:35","guid":{"rendered":"http:\/\/blog.inforere.com\/?p=322"},"modified":"2017-06-02T23:33:58","modified_gmt":"2017-06-02T15:33:58","slug":"webpack2%e7%bc%96%e8%af%91scss","status":"publish","type":"post","link":"https:\/\/blog.inforere.com\/?p=322","title":{"rendered":"webpack2\u7f16\u8bd1scss"},"content":{"rendered":"<pre class=\"lang:default decode:true\">cnpm install --save-dev webpack sass-loader node-sass css-loader extract-text-webpack-plugin<\/pre>\n<p>package.json<\/p>\n<pre class=\"lang:default decode:true\">  \"scripts\": {\r\n    \"dev\": \"webpack --progress --watch --config webpack.config.js\"\r\n  }<\/pre>\n<p>webpack.config.js<\/p>\n<pre class=\"lang:default decode:true\">var path = require('path');\r\nconst ExtractTextPlugin = require('extract-text-webpack-plugin');\r\nmodule.exports = {\r\n    entry: '.\/src\/index.js',\r\n    output: {\r\n        filename: 'bundle.js',\r\n        path: path.resolve(__dirname, 'dist')\r\n    },\r\n    module: {\r\n        rules: [{\r\n            test: \/\\.css$\/,\r\n            use: ExtractTextPlugin.extract({\r\n                use: 'css-loader'\r\n            })\r\n        }, {\r\n            test: \/\\.(sass|scss)$\/,\r\n            use: ExtractTextPlugin.extract({\r\n                use: [\r\n                    'css-loader',\r\n                    'sass-loader',\r\n                ]\r\n            }),\r\n        } ]\r\n    },\r\n    plugins: [\r\n        new ExtractTextPlugin('styles.css'),\r\n    ]\r\n};<\/pre>\n<p>src\/index.js<\/p>\n<pre class=\"lang:default decode:true \">import '.\/main.scss';\r\nimport '.\/home.scss';\r\nimport 'font-awesome\/css\/font-awesome.min.css'\r\n\r\nexport {};<\/pre>\n<p>\u5b89\u88c5\u4e2a\u5b57\u4f53\u5e93<\/p>\n<pre class=\"lang:default decode:true\">cnpm install --save-dev file-loader url-loader<\/pre>\n<p>\u914d\u7f6ewebpack.config.js<\/p>\n<pre class=\"lang:default decode:true\">            {\r\n                test: \/\\.(woff2?|eot|ttf|otf|svg)(\\?.*)?$\/,\r\n                loader: 'url-loader',\r\n                options: {\r\n                    limit: 10000,\r\n                    name: 'fonts\/[name].[hash:7].[ext]'\r\n                }\r\n            }<\/pre>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>cnpm install &#8211;save-dev webpack sass-loader node-sass c [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[],"_links":{"self":[{"href":"https:\/\/blog.inforere.com\/index.php?rest_route=\/wp\/v2\/posts\/322"}],"collection":[{"href":"https:\/\/blog.inforere.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.inforere.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.inforere.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.inforere.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=322"}],"version-history":[{"count":3,"href":"https:\/\/blog.inforere.com\/index.php?rest_route=\/wp\/v2\/posts\/322\/revisions"}],"predecessor-version":[{"id":325,"href":"https:\/\/blog.inforere.com\/index.php?rest_route=\/wp\/v2\/posts\/322\/revisions\/325"}],"wp:attachment":[{"href":"https:\/\/blog.inforere.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=322"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.inforere.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=322"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.inforere.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=322"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}