webpack 面试

资料：

Vue2.0手脚架搭建

step 1 确保你安装了node.js、Vue

（如果你嫌node.js自带的npm太慢，还要确保安装其他代替工具比如cnpm）

step 2 全局安装vue-cli npm install vue-cli -g

step 3 初始化项目 vue init webpack-simple my-project

（在想要的位置执行下方命令，会在该位置生成一个项目文件夹，文件夹名字是下方命令中你输入的my-project）

小型项目：

vue init webpack-simple my-project

中大型项目：

vue init webpack my-project

step 4 进入已创建的项目文件夹：cd 项目文件名，如： cd my-project

step 5 编辑package.json和webpack.config.js文件

• package.json：可以编辑常用的项目依赖到里面，也可以不编辑，执行npm install之后，再单独执行npm install xxx安装额外的依赖。
• webpack.config.js：后面说明。

step 5 执行npm install安装依赖

step 6 执行npm run dev，即可启动

step 7 另起一个命令窗口，cd到当前目录。编辑完代码后执行webpack → 页面更新。

配置webpack.config.js文件

1 入口文件

配置entry。
（手脚架默认入口文件main.js在根目录下的src文件夹。根据需要改动。）

module.exports = {
    entry: './src/main.js',……

2 生产环境输出目录

配置output。

module.exports = {
    ……
    output: {
        path: path.resolve(__dirname,'./dist'),【生产环境】build.js输出到生产环境的路径，例如当前是 ./dist/build.js 这个位置
        publicPath: '/dist/', 【开发环境】开发环境使用npm run dev时的虚拟目录，因为开发环境下不依赖生产环境文件，所以目录不同，但是html引入是静态的，所以html里，写一个和生产环境一致的虚拟路径，html不用改。例如当前HTML就引入
            

            	
相关内容

SecureRandom
从C语言过渡到C++之引用（别名）
乱谈百度地域性影响因素
网络创业：必须要遵循以下五个基本原则
简单仿写Android控件SlidingMenu的实例代码
网络危机公关和名誉管理远远超出SEO范围
BlueHost/HostMonster修改内存不足和文件上传大小限制
网站site网址不在首页该怎么办？
垃圾站GGAD有新招 日收录从1刀变12刀
黄绍麟：51.com突破1亿会员的推广策略

            
        
    
    

    	

        
推荐文章
            

        
    	

        
站长推荐
            
Sass学习笔记
MySql表、字段、库的字符集修改及查看方法
如何自动为你的英文网站做外链
Linux系统下使用rpm方式安装最新mysql5.7.17完整
搜索营销之用网赚结合外贸
linux 匿名管道实例详解
讨论：做网站流量第一，还是赚钱第一？
移动端rem
INDEX,NOINDEX,FOLLOW和NOFOLLOW使用方法
使用ant的tabs进行页面跳转
        
        
        

    	

        
热点阅读
            

        
        

        
	




【免责声明】本站内容转载自互联网，其发布内容言论不代表本站观点，如果其链接、内容的侵犯您的权益，烦请提交相关链接至邮箱bqsm@foxmail.com我们将及时予以处理。
建议您使用1920×1080分辨率、谷歌浏览器Google Chrome、Microsoft Edge以获得本站的最佳浏览效果
Copygight © 2008-2022 https://www.lidatong.com.cn/ All Rights Reserved. 李大同