您的位置：首页 > Web前端 > Webpack

webpack学习1-打包

2018-02-01 16:12 288 查看
webpack是前端开发的包管理工具，优化开发流程1. 
npm init
2. 
npm install --save-dev webpack
3.创建 app public两个文件夹
index.html
--放在public文件夹中;
Greeter.js
-- 放在app文件夹中;
main.js
-- 放在app文件夹中;4.增加代码index.html加入如下文件
<!-- index.html --> <!DOCTYPE html>
<html lang="en"> <head> <meta charset="utf-8">
<title>Webpack Sample Project</title>
</head>
<body>
<div id='root'> </div>
<script src="bundle.js"></script>
</body>
</html>
greeeter.js 增加如下
module.exports = function() {
var greet = document.createElement('div');
greet.textContent = "Hi there and greetings!"; return greet;
};
　　5.编译打包
一。命令方式.
webpack app/main.js public/bundle.js

二。配置文件方式
1.创建 webpack.config.js
module.exports = {
　　 entry: __dirname + "/app/main.js",//已多次提及的唯一入口文件
　  output: { path: __dirname + "/public",//打包后的文件存放的地方
filename: "bundle.js"//打包后输出文件的文件名
} }
　　这样打包时只需输入 webpack即可，是不是很方便三。更快捷的打包方式package.json 增加如下"scripts": { "start": "webpack" // 修改的是这里，JSON文件不支持注释，引用时请清除 }打包时输入：
npm start
可以达到同样的效果

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航