傻瓜式学习webpack（二）——配置webpack

最新推荐文章于 2021-12-17 14:14:03 发布

AryaoO

最新推荐文章于 2021-12-17 14:14:03 发布

阅读量463

点赞数

分类专栏： webpack 文章标签： webpack webpack.config.js react-webpack

本文链接：https://blog.csdn.net/Selina_Chan/article/details/78432017

版权

webpack 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

通过上一篇文章，我们成功建立了一个项目。接下来：

一、我们创建一个必须文件webpack.config.json，用来存放webpack的配置信息。另外我们建立一个index.js作为这个项目所需的js文件。（如果使用react或者其他框架的同志们，可以在该项目下通过 npm install react下载下来，随后引入即可）；

二、（1）我们在index.js文件内写入简单的代码：

import React from "react";
import ReactDOM from "react-dom";
ReactDOM.render(
    <div>Hello World!</div>,
    document.querySelector('#container'),
)

（2）然后对webpack进行配置：

module.exports = {
    //entry 入口文件 让webpack用哪个文件作为项目的入口
    entry: {
        index: './view/index.js',
    },
    //output 出口 让webpack把处理完成的文件放在哪里
    output: {
      path: __dirname+'/dist',
      filename: '[name].js'
    },
    //时刻监听文件的更新
    watch: true,
    watchOptions: {
        ignored: /node_modules/
    },
    //module 模块 要用什么不同的模块来处理各种类型的文件
    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                loader: 'babel-loader',//采用babel模块
                exclude: /node_modules/,//忽略mode_modules的代码
                query: {
                    presets: ['es2015','react']//解析es6和react语言
                }
            }
        ]
    },
    resolve: {
        extensions: ['.coffee','.js']
    },
  };

（3）在运行webpack之前，要确保所需都都install了。比如我这边需要install的有：babel-loader、babel-core、babel-preset-es2015、babel-preset-react、react、react-dom等；

三、运行webpack，这时可以看到再dist文件夹那边已经生成了index.js文件，只需要在html文件中引入./dist/index.js文件即可。同时，我们在webpack.config.js里面的watch设置为了true，保证每次js修改，对应的dist里的js也相应更新