react+webpack+scss配置文件-原创手记-慕课网

package.json

{
  "name": "arkabat",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack",
    "build": "webpack-dev-server --content-base build --inline --hot"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "6.26.0",
    "babel-loader": "7.1.2",
    "babel-preset-env": "1.6.1",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "6.24.1",
    "css-loader": "0.28.8",
    "extract-text-webpack-plugin": "3.0.2",
    "file-loader": "1.1.6",
    "html-webpack-plugin": "2.30.1",
    "sass-loader": "6.0.6",
    "style-loader": "0.19.1",
    "url-loader": "0.6.2",
    "webpack": "3.10.0",
    "webpack-dev-server": "^2.9.7"
  },
  "dependencies": {
    "font-awesome": "^4.7.0",
    "react": "16.2.0",
    "react-dom": "16.2.0"
  }
}

webpack.config.js

var webpack=require("webpack");
var path=require("path");
//帮你生成最终的Html5文件，这个文件中自动引用了你打包后的JS文件。每次编译都在文件名中插入一个不同的哈希值。
var HtmlWebpackPlugin=require("html-webpack-plugin");
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var config={
    // __dirname nodejs获取路径的一个解决方案
    entry:'./app/app.jsx',
    // 出口文件没有创建，定义就行了，所以定义对象形式的
    output: {
        // path指向的是路径
        path: __dirname+'/build',
        // 文件名字
        filename: 'app.js'
    },
    //定义各种对象
    module: {
        //模块
        rules: [
            {
                test: /\.jsx$/,
                exclude: /(node_modules)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['env','react']
                    }
                }
            },
            {
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    fallback: "style-loader",
                    use: "css-loader"
                }),
            },
            {
                test: /\.scss$/,
                use: ExtractTextPlugin.extract({
                    fallback: "style-loader",
                    use: ["css-loader","sass-loader"]
                }),
            },
            {
                test: /\.(png|jpg|gif)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 8192,
                            name:'resource/[name].[ext]'
                        }
                    }
                ]
            },
            {
                test: /\.(eot|svg|ttf|woff|woff2|otf)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 8192,
                            name:'resource/[name].[ext]'
                        }
                    }
                ]
            }
        ]
    },
    plugins: [
        //帮你生成最终的Html5文件，这个文件中自动引用了你打包后的JS文件。
        new HtmlWebpackPlugin({
            template:'./app/index.html'
        }),
        /*记录一下，
        webpack extract-text-webpack-plugin插件可以将require的CSS提取出来生成单独的.css文件，并使用link加载。
        从style-loader+css-loader切换过来几乎零成本，也支持css modules
        ，但遗憾的是不支持import时带media query，只能将media query写到css文件中去。
        * */
        new ExtractTextPlugin("css/[name].css"),
        new webpack.optimize.CommonsChunkPlugin({
            name:'common',
            filename:'js/base.js'
        })
    ],
   devServer: {
        contentBase:'dist'
    }
}

module.exports = config;

帮助

优点：模块化

在webpack看来一切都是模块！这就是它不可不说的优点，包括你的JavaScript代码，
也包括CSS和fonts以及图片等等等，只有通过合适的loaders，它们都可以被当做模块被处理。

app文件夹：源码文件夹
app.js是入口文件

bundle文件夹是编译之后的文件夹
bundle.js编译出来的文件

app.js的作用引入模块化的js文件

使用webpack编译
命令：webpack 入口文件  出口文件

__dirname nodejs获取路径的一个解决方案

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start":"webpack",
    "build":"webpack-dev-server"
  },

npm start
npm run build

启动webpack服务器         访问根目录(路径)     build(首页，根)        热更新
webpack-dev-server       --content-base     build        --inline --hot

二、webpack-pulgins

插件（Plugins）是用来拓展Webpack功能的，它们会在整个构建过程中生效，执行相关的任务。
Loaders和Plugins常常被弄混，但是他们其实是完全不同的东西，可以这么来说，loaders是在打包构建过程中用来处理源文件的（JSX，Scss，Less..），一次处理一个，插件并不直接操作单个文件，它直接对整个构建过程其作用。

Webpack有很多内置插件，同时也有很多第三方插件，可以让我们完成更加丰富的功能。

1、如何使用插件？

该插件的作用是依据一个简单的模板，帮你生成最终的Html5文件，
这个文件中自动引用了你打包后的JS文件。每次编译都在文件名中插入一个不同的哈希值。
//安装
npm install --save-dev html-webpack-pugin

yarn add font-awesome //安装font-awsome

图片描述