webpack 学习笔记 --- node.js开发

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"
  }
}

相关推荐博客

webpack入门（六）——html-webpack-plugin