webpack在package.json的配置

一：准备工作

我们创建如下文件和文件夹:

文件和文件夹解析:
        dist文件夹:用于存放之后打包的文件
        src文件夹:用于存放我们写的源文件
                main.js:项目的入口文件。具体内容查看下面详情
                mathUtils.is:定义了一些数学工具函数，可以在其他地方引用，并且使用。具体内容查看下面的详情。

        index.html:浏览器打开展示的首页html
        package.json:通过npm init生成的，npm包管理的文件(暂时没有用上，后面才会用上)

二. 局部安装webpack

1. 目前，我们使用的webpack是全局的webpack，如果我们想使用局部来打包呢

        因为一个项目往往依赖特定的webpack版本，全局的版本可能很这个项目的webpack版本不一致，导出打包出现问题。
        所以通常一个项目，都有自己局部的webpack。

2. 第一步，项目中需要安装自己局部的webpack

        --save-dev是开发时依赖，项目打包后不需要继续使用的

    
    

      
      

       
       

      
      
      
      

       
       

        
        cd 对应目录
       
       
      
      

      
      

       
       

      
      
      
      

       
       

        
        npm install webpack
        
        @3
        
        .6
        
        .0 
        
        --save-dev
       
       
      
      
    
    

3. 第二步，通过node modules/.bin/webpack启动webpack打包

三. 入口和出口

如果每次使用webpack的命令都需要写上入口和出口作为参数，就非常麻烦，有没有一种方法可以将这两个参数写到配置中，在运行时，直接读取呢 ?创建一个webpack.config.js文件

    
    

      
      

       
       

      
      
      
      

       
       

        
        // 导入path包，依赖node相关包
       
       
      
      

      
      

       
       

      
      
      
      

       
       

        
        const path = 
        
        require(
        
        'path')
       
       
      
      

      
      

       
       

      
      
      
      

       
       
 
       
       
      
      

      
      

       
       

      
      
      
      

       
       

        
        // 使用commonjs的模块化规范
       
       
      
      

      
      

       
       

      
      
      
      

       
       

        
        module.
        
        exports = {
       
       
      
      

      
      

       
       

      
      
      
      

       
       
	
        
        // 入口：可以是字符串/数组/对象，这里我们入口只有一个，所以写一个字符串即可
       
       
      
      

      
      

       
       

      
      
      
      

       
       
	
        
        entry:
        
        './src/main.js',
       
       
      
      

      
      

       
       

      
      
      
      

       
       
	
        
        // 出口：通常是一个对象，里面至少包含两个重要属性，path 和 filename
       
       
      
      

      
      

       
       

      
      
      
      

       
       
	
        
        output:{
       
       
      
      

      
      

       
       

      
      
      
      

       
       
		
        
        // 动态获取路径,path通常是一个绝对路径
       
       
      
      

      
      

       
       

      
      
      
      

       
       
		
        
        path: path.
        
        resolve(__dirname,
        
        'dist'),
       
       
      
      

      
      

       
       

      
      
      
      

       
       
		
        
        filename:
        
        'bundle.js'
       
       
      
      

      
      

       
       

      
      
      
      

       
       

        
        	}
       
       
      
      

      
      

       
       

      
      
      
      

       
       

        
        }
       
       
      
      
    
    

四. package.json中定义启动

1. 我们可以在packagejson的scripts中定义自己的执行脚本。

通过npm init初始化，生成package.json，npm包管理的文件(暂时没有用上，后面才会用上)

npm init
    
    

2. package.json中的scripts的脚本在执行时，会按照一定的顺序寻找命令对应的位置。

        首先，会寻找本地的node_modules/.bin路径中对应的命令。
        如果没有找到，会去全局的环境变量中寻找
        执行我们的build指令

npm run build
    
    

</article>