webpack配置笔记

 
  
  
   
  
 创建一个简易项目进行webpack打包具体步骤：
 1.1 创建一个文件夹webpack。
 1.2 在webpack创建一个src文件夹和index.html以及一个webpack.config.js（可以命名为其他的，比如webpack.config.dev.js）配置文件。
 1.3 src中创建1.js、2.js、3.js以及app.js文件，进行模块化开发。其中1.js、2.js、3.js导出代码内容：如export default function func(){
    console.log("我是1/2/3.js的代码")
}
 1.4 在根目录文件夹webpack的命令行指令中执行初始化npm （npm init），然后在下载webpack（npm i -D webpack@版本 或者npm i -D webpack）。
 备注：其中 -D表示只在开发环境打包
 1.5 在下载的初始化生成的package.json中配置打包命令："scripts": {
    "build": "webpack"   //默认是webpack webpack.config.js，如webpack.config.js名字修改，这里也要同步修改。
}
 1.6 在新建的webpack.config.js文件中配置：const path=require('path');
module.exports={
    entry:"./src/app.js",  //入口文件
    output:{   //打包输出文件
        path:path.resolve(__dirname,'dist'),  //输出文件地址,跟目录下dist文件下，
        filename:"app.js"      //输出文件名字,最终输入文件为webpack/dist/app.js
    }   
}
 1.7 在index.html中引入dist/app.js<script src='./dist/app.js'></script>
 
 
Ace.斗皇
发布了200 篇原创文章 · 获赞 37 · 访问量 11万+
私信关注
猜你喜欢
