npm起源、概念与优势


  • npm是一个包管理工具
  • npm开始是专门为了node.js准备的一个包管理工具，通过npm可以下载并使用网上已经封装好的js代码
  • CommonJS很大一部分是对于模块系统的规范，方便引入js文件，但通过require引入的js文件无法被浏览器识别
  • webpack可以把通过require引入的js文件编译为浏览器支持的js文件，并把多个文件打包成一个js文件，对于性能的提升具有十分巨大的优势

//webpack配置文件webpack.config.js
//npm install babel-core babel-preset-env babel-loader --save-dev 
//安装babel
module.exports = {
 entry: './index.js',
 output: {
   filename: 'bundle.js'
 },
 module: {
   rules: [ // 手动加粗
     {
       test: /\.js$/,
       exclude: /node_modules/,
       use: {
         loader: 'babel-loader', //使babel与webpack进行良好的协作
         options: {
           presets: ['env']
         }
       }
     }
   ]
 }
};

  • babel可以把ES6和之后的新特性编译为更早更兼容的ES5，并可以在webpack打包的时候使用babel，方便我们使用最新的特性来进行可读性更好，更简洁的代码编写。
  • 通过对于package.json的配置，可以让webpack使用npm脚本
  • 安装webpack-dev-server，json文件后以一个热更新的web服务器运行程序

{
 "name": "modern-javascript-example",
 "version": "1.0.0",
 "description": "",
 "main": "index.js",
 "scripts": { // 手动加粗
   "test": "echo \"Error: no test specified\" && exit 1",
   "build": "webpack --progress -p",   //运行带有--progress选项显示进程，-p选项最小化生产代码
   "watch": "webpack --progress --watch", //每次修改JS文件后重新运行webpack命令
   "server": "webpack-dev-server --open"
 },
 "author": "",
 "license": "ISC",
 "dependencies": {
   "moment": "^2.19.1"
 },
 "devDependencies": {
   "babel-core": "^6.26.0",
   "babel-loader": "^7.1.2",
   "babel-preset-env": "^1.6.1",
   "webpack": "^3.7.1"
 }
}

npm使用注意事项

.npmignore 与.gitignore 配置规则
# 此为注释 – 将被 Git 忽略 *.a       # 忽略所有 .a 结尾的文件 !lib.a    # 但 lib.a 除外 /TODO     # 仅仅忽略项目根目录下的 TODO 文件，不包括 subdir/TODO build/    # 忽略 build/ 目录下的所有文件 doc/*.txt # 会忽略 doc/notes.txt 但不包括 doc/server/arch.txt

webpack的配置

const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装
const webpack = require('webpack'); // 用于访问内置插件
module.exports={
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装
const webpack = require('webpack'); // 用于访问内置插件
module.exports={
    entry: //配置打包起点  当我们只有一个入口时，可以通过字符串形式来进行简写。
           //当我们有多个入口时，可以通过对象语法来进行配置
           //{
           //   app:'./src/app.js'
           //}
    output: { //配置打包后的文件放置路径与打包后的文件名 无论我们有多少个起点，出口只有一个
            //
        path:path.resolve(__dirname,'dist'), //放置文件的文件夹
        filename:'' //文件名
    }
    mode: 'production' //模式  有三个选项: none,development,production(默认)
        //使用mode时，必须将配置导出为一个函数，相对来说mode很少使用，大部分时间都是尝试自己配          //置,而不是采用webpack的内置优化
    module:{
        rules:[ //webpack允许在配置时拥有多个loader,通过这种方式配置loader会使我们的代码                 //变得更加简洁并更利于维护,当使用多个loader时，loader自下往上执行。
            {
                test: /\.js$/, //标识出应该被对应loader进行转换的文件
                use:{
                    loader:'babel-loader' //进行loader转换的文件
                }
            }
        ]
    },
    plugins:[  //webpack插件
        new HtmlWebpackPlugin({template:'./src/index,html'})
    ]
}
}