node.js和webpack的学习总结

npm 使用

• npm install -g http-server
  -g： 代表是全局安装，作为命令行工具来使用
• npm install --save axios
  --save 把模块安装到当前目录下，且模块名加载到package.json的dependencies下
• npm install --save-dev webpack，
  --save-dev 模块名加载到devDpendencies；devDpendencies是测试代码之类的例如webpack此类打包工具的地方。跟包的函数功能关系分隔开的的

node_modules太大怎么办？：

一定要生成.gitignore文件 内部内容为 node_modules，将之排除掉
反之若要下载github的文件到本地克隆下来之后可以使用命令npm install来将package.json名下的dependencies中的库下载下来

webpack

我的理解webpack就是一个打包器，将源码通过node来进行打包生成一个main.js（即将多个js/css/img...等文件进行汇集）来减少请求

webpack-demo
|-package.json
|- webpack.config.js
|-dist
   +|- index.html
|-/src
     |-index.js

大概的结构如上，下面对每一个部分进行详细描述

webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist')
  }
};

将接口和输出口设置好；
在接口即index.js的里面进行逻辑引用各种工具模块库

src/index.js

+ import _ from 'lodash';
+
  function component() {
    var element = document.createElement('div');

-   // Lodash, currently included via a script, is required for this line to work
+   // Lodash, now imported by this script
    element.innerHTML = _.join(['Hello', 'webpack'], ' ');

    return element;
  }

  document.body.appendChild(component());

dist/index.html

在输出口的html里引用的js文件只需要引用main.js

  
   
     
   
   
    
   
  

package.json 使用脚本

添加一个快捷方式

{
    "name": "webpack-demo",
    "version": "1.0.0",
    "description": "",
    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1",
+     "build": "webpack" //这里添加了个快捷方式
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
      "webpack": "^4.0.1",
      "webpack-cli": "^2.0.9",
      "lodash": "^4.17.5"
    }
  }

loader资源

使用 loader 告诉 webpack 加载 CSS 文件，或者将 TypeScript 转为 JavaScript。为此，首先安装相对应的 loader：

npm install --save-dev css-loader
npm install --save-dev ts-loader

配置使用

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          { loader: 'style-loader' },
          {
            loader: 'css-loader',
            options: {
              modules: true
            }
          }
        ]
      }
    ]
  }
};

在index.js下引入

+ import './style.css';

运行构建命令

npm run build