针对 webpack + es6 + react 安装使用及其遇到的问题！

ゝ一纸荒年。 2022-07-13 04:49 72阅读 0赞

#### 主要是针对 webpack + es6 + reactWeb 安装使用及其所遇到的问题， ####

#### 为了不耽误大家宝贵的时间及其阅读繁琐，我先一次性的把安装使用的步骤介绍完，然后在分析所遇到的问题！ ####

### 安装使用 ###

--------------------

**使用node npm进行安装，首先，我先附上webpack.config.js的代码，再进一步使用：**

*webpack.config.js*

//webpack.config.js
    var webpack = require('webpack'),
        HtmlWebpackPlugin = require('html-webpack-plugin'),
        ExtractTextPlugin = require('extract-text-webpack-plugin');
    
    module.exports = {
    
        devtool: 'eval-source-map',
    
        entry: __dirname + "/webpck/app/main.js", //已多次提及的唯一入口文件
        output: {
            path: __dirname + "/dist/public", //打包后的文件存放的地方,注：“__dirname”是node.js中的一个全局变量，它指向当前执行脚本所在的目录。
            filename: "bundle.js" //打包后输出文件的文件名
        },
        devServer: {
            contentBase: "/webpck/public", //本地服务器所加载的页面所在的目录
            colors: true, //终端中输出结果为彩色
            historyApiFallback: true, //不跳转
            inline: true //实时刷新
        },
        /*loaders*/
        module: { //在配置文件里添加JSON loader
            loaders: [ 
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                query: {
                    presets: ['es2015']
                }
            },
            {test: /\.json$/,loader: "json"},
            {test: /\.css$/, loader: "style!css" },
            {test: /\.less$/,loader: 'style!css!less'},
            {test: /\.(png|jpg|jpeg|gif|woff)$/, loader: 'url?limit=8192' },
            {test: /\.(otf|eot|ttf)$/, loader: "file?prefix=font/" },
            {test: /\.svg$/, loader: "file" }]
        },
        postcss: [
            require('autoprefixer') //调用autoprefixer插件,加入各个浏览器的前缀
        ],
        plugins: [
            new HtmlWebpackPlugin({
                template: __dirname + "/webpck/app/index.html" //new 一个这个插件的实例，并传入相关的参数
            }),
            new webpack.HotModuleReplacementPlugin(), //热加载插件
    
            new webpack.optimize.OccurenceOrderPlugin(),
            new ExtractTextPlugin("style.css")
        ],
    
    }

**以上就是我的webpack.config.js配置信息，不过你也可自己写！**

### 安装命令： ###

--------------------

**接下来就根据webpack.config.js的配置进行安装** \*

**这是实现webpack + es6 + react 所有安装命令：**

//首先安装 webpack 跟 react reactDOM 插件
    npm install --save webpack react react-dom
    
    //其次，继续安装webpack.config.js所需要的配置
    npm install --save html-webpack-plugin extract-text-webpack-plugin
    
    npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react 
    
    npm install --save  autoprefixer
    
    npm i style-loader -D
    npm i css-loader -D

--------------------

附：这里`babel`已经废弃，将其移动到babel-core中，如果安装了babel，请卸载：

> npm uninstall babel –save-dev

不然运行`webpack`的时候会报各种各样的错误信息！

ok，试运行，OK，没问题！

--------------------

## =====接下来，说下使用的时候遇到的问题：====== ##

**问题1：**

![这里写图片描述][SouthEast]

#### 描述：使用`webpack` 打包后，使用`es6`的`import`引入文件的时候 ####

#### 运行的时候 import不存在问题！ ####

例如：

![这里写图片描述][SouthEast 1]

如果你不想使用`gulp`去解决`import`不存在的情况下，使用webpack进行解决，

**安装执行命令即可**

> npm install –save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react

--------------------

**问题2：**

当你使用`ES6`的 `import` 引用css 的时候，例如：

![这里写图片描述][SouthEast 2]

在运行 `webpack` 的时候，报错：

![这里写图片描述][SouthEast 3]

你可能会怀疑，是`webpack.config.js`配置信息，出问题

![这里写图片描述][SouthEast 4]

但检查半天不是这里的问题，那么问题来了，这么解决，

上面的配置是说，对于拓展名是 .css 的文件，使用加载器 style!css（这边中间有一个感叹号，意思是：先是用 css 加载器处理，然后使用 style 加载器处理）。完整的写法是：style-loader!css-loader, 其中，-loader可以省略。而这里的，style-loader 和css-loader 就需要你 npm 安装下了。

**运行命令行：**

> $ npm i style-loader -D
> 
> $ npm i css-loader -D

在运行`webpack`，ok ，完美解决！！！！

--------------------

代码链接：[在这里][Link 1]，希望可以帮到你！

[SouthEast]: /images/20220713/cf01fc6205424dcfbce0388345493a08.png
[SouthEast 1]: /images/20220713/d0705c5877ea4901aab3679cef104fe1.png
[SouthEast 2]: /images/20220713/1b87b7a8f2d4470688bd40519692f389.png
[SouthEast 3]: /images/20220713/6193940f0d2e4b10a8bcb110a4a09650.png
[SouthEast 4]: /images/20220713/9a960b671e7f443a820761343c44a8ca.png
[Link 1]: http://download.csdn.net/detail/qq_16559905/9720873