Nodejs在线便利贴

项目搭建

1. npm init -y //初始化项目
2. npm install express --save //安装express
3. npm install express-generator --save-dev 或者 npm install express-generator -g //使用脚手架生产基本文件,第一个是安装到当前项目，第二个是安装到全局
4. ./node_modules/express-generator/bin/express-cli.js . -f -e //使用这个脚手架，在当前文件夹创建
5. npm install //安装依赖
6. npm start //运行看一下
   • tskill node //端口号冲突，暂时用这个命令关闭node服务，具体解决方法以后再研究`
7. （可选）npm install onchange 或者 npm install --save-dev onchange //文件发生改变时自动
8. 添加基本文件目录src目录

---

webpack配置

1. 安装

//全局安装
npm install -g webpack
//安装到你的项目目录
npm install --save-dev webpack
复制代码

2.在终端中使用webpack，在基本的使用方法如下：

# {extry file}出填写入口文件的路径，本文中就是上述main.js的路径，
# {destination for bundled file}处填写打包文件的存放路径
# 填写路径的时候不用添加{}
webpack {entry file} {destination for bundled file}
复制代码

3. 通过配置文件来使用Webpack，webpack.config.js文件中

//webpack.config.js文件中

var path = require('path')
module.exports = {
    entry: path.join(__dirname, "/js/app/index.js"),
    output: {
        path: path.join(__dirname, "../public/js/"),
        filename: "bundle.js"
    }
};
复制代码

4. 在webpack.config.js目录下执行webpack(全局的)或者node_modules/.bin/webpack app/main.js public/bundle.js (webpack非全局安装的情况)
5. 但是一般我们会在跟，目录下执行命令，所以需要在package.json中配置一下scripts

 "webpack": "webpack --config=src/webpack.config.js"
复制代码

这样就可以在根目录执行npm run webpack来对项目进行打包了。

6. npm install --save-dev onchange //用onchange监控文件的修改，并自动打包编译.需要在package.json中配置一下。

"watch": "onchange 'src/**/*.js' 'src/**/*.less' -- npm run webpack"
复制代码

这样就可以在根目录执行npm run watch来对项目进行监控并自动打包编译了。

---

组件

待续...

转载于:https://juejin.im/post/5c892ad7e51d45130d3f126e