Sansx's Studio.

webpack简单打包

npm webpack
字数统计: 442阅读时长: 1 min
2018/12/05 Share

webpack安装

安装为开发依赖：npm install webpack –save-dev

简写npm -i webpack -D

项目配置

  1. 在项目文件夹下创建webpack.config.js文件

  2. 最简配置

    1
    2
    3
    4
    5
    6
    7
    8
    const path = require('path')　　 //引入node路径模块  
    module.exports = {  
    　　entry: './入口文件.js',		//输入项  
    　　output: {  
    　　　path: path.resolve(__dirname,'dist'),//获取路径为当前文件夹下  
    　　　filename: 'main.js'　　//打包输出为此文件  
    　　}  
    }

    配置好之后就可以进行最简单的模块化打包了

  3. 在npm配置的scripts中设置打包指令"dev":"webpack"

  4. 命令行中输入npm run dev开始打包

  • 插件

    　　webpack插件一般结尾为webpack-plugin，例如较为常用的html-webpack-plugin，clean-webpack-plugin等；
    　　通过npm将插件下载之后，引入webpack.config.js中，格式为： 
    1
    2
    3
    4
    5
    6
    7
    8
    var htmlWebpackPlugin = require("html-webpack-plugin")//插件作用为通过特定配置输出html文件  
    module.exports = {  
    ...  
    　　output:{},  
    　　plugins:[  
    　　　　new htmlWebpackPlugin()//可以在内部以对象格式添加配置{filename:'输出文件名',template:'文件模板'}  
    	]  
    }

关于html-webpack-plugin的详细配置

  • 预处理模块(loader)*

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    module.exports = {  
    ...  
    　　output:{},  
    　　plugins:[],
    　　module:｛
    　　　　rules:[{
    　　　　　　test:/\.js$/,//匹配规则，此正则表示匹配所有js文件
    　　　　　　use:[{
             loader:'bable-loader'，//匹配成功后使用的编译器,需要npm下载
             options:{
             　　各种设置
             }
           }]
    　　　　}]
    　　｝
    }

  • 测试服务器(devserver)

    npm安装:npm i -D webpack-dev-server
    作用：更改页面时自动替换页面内容（热替换） 

    1
    2
    3
    4
    5
    6
    7
    8
    9
    module.exports = {  
    ...  
    　　module:｛},
    　　devServer:{
    　　　　open:true,//自动打开浏览器测试
    　　　　port:8080,//设置端口
    　　　　
    　　}
    }

至此关于webpack配置文件的基本结构已经大致介绍了一遍，之后会整理各种配置的详细信息，以及常用插件模块，也可以自行查看webpack官方文档

原文作者：Sansx

原文链接：https://github.com/sansx/2018/12/05/webpack1/

发表日期：December 5th 2018, 12:00:00 am

更新日期：June 21st 2019, 9:52:52 am

版权声明：本文采用知识共享署名-非商业性使用 4.0 国际许可协议进行许可

CATALOG
  1. 1. webpack安装
  2. 2. 项目配置
  3. 3. 插件
  4. 4. 预处理模块(loader)*
  5. 5. 测试服务器(devserver)
Total : 19
2019
2018
翻译 databases docker linux centos7 Docker nginx Node.js npm pm2 CoffeeScript JavaScript 算法 数据 数组 css stackoverflow node 爬虫 mysql vue api h5 webpack windows