webpack的简单配置

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了webpack的简单配置相关的知识,希望对你有一定的参考价值。

  本人刚开始也不会写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配置已经完成了,你可以安心写你的别的代码了

以上是关于webpack的简单配置的主要内容,如果未能解决你的问题,请参考以下文章

WebPack的配置(起步)

webpack4常用片段

webpack的简单配置

vue webpack 起步配置loader

vue webpack 起步配置loader

webpack 简单配置