webpack的简单配置

Posted 2020-08-02

　　本人刚开始也不会写webpack配置，刚开始在网上搜索了了一些，看的也是刚刚理解，所以准备自己写下来，已作纪念和贡献给像我一样不会配置的“童鞋”们！

1、创建webpack配置文件

　　在项目文件下创建一个webpack.config的js文件。

　　

2、配置文件创建好了，我们就开始正式配置webpack了。

　　1、我们要安装nodejs,应为webpack基于nodejs，nodejs可以点击这里下载；

　　2、安装完nodejs之后，我们打开命令窗口，找到你的项目文件，在项目文件webpack.config.js文件所在的目录下

　　　　输入npm install webpack --save-dev（下载webpack依赖插件到本地项目中），下载完成之后，在你们的项目文件中（与webpack.config.js文件同级目录下）会自动创建node_modules文件夹，里面装的就是所有要的本项目要用的依赖插件（当然，现在只有一个webpack插件），我们先用到什么先下载什么插件，如果有需要后面再下载。

 

　　说明：下图为在项目文件下，打开命名窗口，输入安装webpack插件

　　

　　说明：下图是下载webpack完成时

 

　　

 

　　说明：下图为项目文件下自动创建的node_modules

 　　

 

　　3、完成以上步骤之后，我们开始真正的配置webpack了。

　　　　　　

/*
 *@内容：webpack的配置
 *@作者：web前端小白
 *@时间：2016/7/4
 * */

var webpack = require(‘webpack‘);
moudle.exports = {

    //配置入口文件，入口文件可以以对象的形式配置，也可以以数组的形式配置,后缀名可以省略
    /*
     * 对象形式配置入口
     * */
    //entry:{
    //    index:‘./index‘       //‘./index.js‘
    //},
    /*
     * 数组形式配置入口
     * */
    entry: [
        ‘./index‘       //‘index.js‘
    ],
    //输出文件出口
    output: {
        /*
         输出路径，在这我们要手动创建一个文件夹，名字可以自己命名，
         输出的文件路径是相对于本文件的路径
         * */
        path: ‘./dist‘,  //输出路径
        filename: ‘[name].bundle.js‘     //输出文件名，文件可以自己定义，[name]的意思是与入口文件的文件对应，可以不用[name]，
    },
    /*
     * 标题：加载器（loaders）
     * 作用：需要下载不同别的加载器，如css，js，png等等
     * */
    loaders: [
        {test: /\\.js?$/, loaders: [‘babel-loader‘]} //babel加载器可以把jsx的语法转换为js的语法，也可以把es6的语法标准转换es5的语法标准
        /*
         * 你可以在这配置别的加载器，写法是一样的
         * */

    ],
    /*
     * 
     * */
    resolve: {
        /*
         * 别名配置，配置之后，可以在别的js文件中直接使用require(‘d3‘)，将导入的文件作为一个模块导入到你需要的项目中，不用配置别也可会当作模块导入项目中，只是你要重复写路径而已。
         * */
        alias: {
            ‘d3‘: ‘d3/d3.min.js‘
        }
    }　　
}

4、以上是配置webpack的代码，配置完成之后，在你webpack.config.js文件所在的目录下打开命令窗口（可以借鉴第一步），输入webpack/webpack -w

 （编译，没改动一次代码，要重新再次输入webpack进行编译 / 自动编译，改动代码并保存之后，可以自动进行编译），希望对像我一样的小白有所帮助。

 

结语：就这样简单的webpack配置已经完成了，你可以安心写你的别的代码了