sublime安装及npm安装webpack系列软件

最新推荐文章于 2024-06-27 16:10:22 发布

john137724

最新推荐文章于 2024-06-27 16:10:22 发布

阅读量2.8k

点赞数

分类专栏：前端文章标签： sublime webpack

本文链接：https://blog.csdn.net/wfl_137724/article/details/80444434

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

写在前面:这篇博客主要介绍前端软件选择及npm安装webpack系列。本文也融入了作者实践中的一些感触。

上一篇关于前端的博客node.js安装及npm设置介绍了node(包含npm)之后。有段时间我就在想在想既然涉及到前端，得找个合适的前端ide。在公司问了个资深的前端，推荐我sublime和vscode。自己也私下里看了好多的前端ide评价。综合评估了下，最后选择了sublime，Hbuilder。选sublime是看重它的轻量级和扩展性，对于学习本来就要多敲代码，sublime就是个高级记事本这点没问题，如果以后用它工作了，可以通过安装插件提高效率，这是我比较看好的。Hbuilder 先放着以后弄APP的时候在研究。

sublime安装：

环境win7 sublime3

下载安装文件sublime3安装文件分享码2bi1
sublime3是收费的，可以先安装，装完后到下面网址看注册方法注册码及配置
好了之后，打开sublime3，发现真不错（至少看着挺舒服的）。

npm安装webpack、webpack-cli、webpack-dev-server

用我的理解大致说下3个模块的功能，系统了解还是要去官网看看：

webpack: 打包插件，在前端的作用可以类比下maven在后端的功能；老板本包含webpack-cli，新版本不包含。

webpack-cli: weipack命令行客户端，可以执行webpack命令的工具；。

webpack-dev-server: webpack本地开发服务器，基于node.js。就类似于apache、nginx用做web服务器的。

npm安装模块有两种方式。全局方式和本地方式（安装到项目路径下），至于该用那种方式安装，这个我还真的不是很清楚。上篇文章配置的既是全局安装的一些配置。

就我个人理解，node.js，npm，webpack都是为开发时提高开发效率的，真正生产环境应该不会装这些东西的。要是图方便就装全局就OK了，多个项目可以共享资源。要是想做到资源隔离，那就本地安装就好了。因为接触还不是很多，先给出结论，后续验证。实践过程中发现，webpack系列安装过程中依赖package.json，而这个文件是npm init初始化项目的产物。言外之意就是webpack是项目相关的。所以在开发的过程中还是本地安装比较合适。

安装webpack：

全局安装：npm install -g webpack 本地安装：npm install webpack

安装webpack-cli：

全局安装：npm install -g webpack-cli 本地安装：npm install webpack-cli

安装webpack-dev-server:

全局安装：npm insall -g webpack-dev-server 本地安装：npm install webpack-dev-server

webpack 打包应用:

webpack直接打包：

webpack app/main.js public/bundle.js

配置webpack.config.js 后打包：

webpack

module.exports = {
  mode:'development',
  //devtool: 'eval-source-map',
  entry:  __dirname + "/app/main.js",//已多次提及的唯一入口文件
  output: {
    path: __dirname + "/public",//打包后的文件存放的地方
    filename: "bundle.js"//打包后输出文件的文件名
  },
  devServer:{
  	contentBase:__dirname + "/public",//本地服务器所加载的页面所在的目录
  	historyApiFallback:true,//不跳转
  	inline:true//实时刷新,查了下这个默认就是true
  }
}

其中mode、entry、等都可以在cmd里通过webpack --help查看 output:{path.. 对应--output-path。__dirname是node.js里的全局变量，表示当前执行脚本所在的路径，这个里面都是自己配置的啊

配置package.json后打包

npm run build 或者 npm start 或者npm run server 启动服务

前者有参数，后者没参数。前者的参数会覆盖webpack.config.js里的mode配置。

--open \"Chrome\"用谷歌浏览器显示网页内容，其中选项也可以在webpack.config.js中配置，就像webpack的mode选项一样,除了scripts内容项，其它的都是装模块（插件）的时候自动生成的

{
  "name": "webpack_test",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack",
    "build": "webpack --mode production",
    "server": "webpack-dev-server --open \"Chrome\""
  },
  "author": "john",
  "license": "ISC",
  "description": "webpack_test",
  "devDependencies": {
    "babel-loader": "^7.1.4",
    "webpack": "^4.8.3",
    "webpack-cli": "^2.1.4",
    "webpack-dev-server": "^3.1.4"
  }
}

至此，前端开发环境告一段落。接下来就是用vue.js实战前端开发。

时间有限，全栈工程师不容易，一步一个脚印，且行且珍惜。。。。。