webpack 学习笔记 — node.js开发
最近开始学习Node.js开发,有很多基础知识和框架需要学习,所以打算将自己学习笔记记录下来,即可以和大家分享,也可以方便自己以后回顾知识。由于只是个人笔记,便不是详细的教程,有不懂的代码还请自行百度。
主要模块
- webpack
- webpack-dev-server 基于express封装好的热更新服务器
辅助模块
- extract-text-webpack-plugin // CSS打包插件
- html-webpack-plugin // html动态生成插件
// css文件加载 - css-loader
- style-loader
// js文件加载,支持es6 - babel-loader
- babel-core
- babel-preset-latest
babel配置参考我得博客 ES6/ES7学习笔记 — node.js开发
项目目录
.
|____.babelrc
|____dist
|____node_modules
|____package.json
|____server
|____src
| |____css
| | |____about.css
| | |____common.css
| | |____index.css
| |____js
| | |____about.js
| | |____index.js
| |____view
| | |____about.html
| | |____index.html
|____webpack.config.js
代码介绍
webpack.dev.js配置
var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextWebpackPlugin = require('extract-text-webpack-plugin');
let configs = {
entry: {
index: './src/js/index.js',
about: './src/js/about.js'
},
output: {
path: './dist',
filename: 'js/[name].js' // 根据原始名动态命名
},
module: {
loaders: [
{
test: /\.css$/,
loader: ExtractTextWebpackPlugin.extract('style', 'css')
}, { // es6配置
test: /\.js$/,
loader: 'babel',
exclude: /node_modules/ // 排除node_modules内的文件
}
]
},
devServer: { // webpack-dev-server配置
contentBase: './server',
host: 'localhost',
port: 3000,
inline: true, // inline模式开启
hot: true
},
plugins: [
new webpack.HotModuleReplacementPlugin(), // 热更新插件
new ExtractTextWebpackPlugin('css/[name].css'), // 根据原始名动态命名
]
};
// 动态生成多个html
for (let chunk in configs.entry) {
configs.plugins.push(
new HtmlWebpackPlugin({
filename: chunk + '.html',
template: './src/view/' + chunk + '.html',
chunks: [chunk]
})
);
}
module.exports = configs;
package.json配置
{
"name": "test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server",
"dist": "webpack"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.18.2",
"babel-loader": "^6.2.8",
"babel-preset-latest": "^6.16.0",
"css-loader": "^0.26.1",
"extract-text-webpack-plugin": "^1.0.1",
"html-webpack-plugin": "^2.24.1",
"style-loader": "^0.13.1",
"webpack": "^1.13.3",
"webpack-dev-server": "^1.16.2"
}
}