webpack配置方式
webpack配置方式
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 //安装babelmodule.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/TODObuild/ # 忽略 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'})
]
}
}