傻瓜式学习webpack(二)——配置webpack

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

一、我们创建一个必须文件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也相应更新

©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页