webpack 笔记，一个简单例子

来源：互联网发布：php 电商编辑：程序博客网时间：2024/05/16 04:30

项目准备

cnpm install webpack -g // 全局安装cnpm init // 初始化项目cnpm install webpack --save // 本地安装cnpm install html-webpack-plugin --save // 把编译后的文件放到html文件cnpm install style-loader css-loader --save // css 相关的 loader

项目代码：

// index.html<!DOCTYPE html><html><head>    <meta name="renderer" content="webkit|ie-comp|ie-stand">    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>    <meta name="keywords" content="关键字"/>    <meta name="description" content="描述" />    <title>webpack</title></head><body>    <h1>hello webpack</h1></body></html>

// src/css/index.cssbody {    background:orange;}

// src/js/index.jsmodule.exports = function () {    console.log('index.js');}

// src/js/app.jsvar index = require('./index');require('../css/index.css');index();

// gruntfile.js 配置文件var webpack = require("webpack");var HtmlWebpackPlugin = require("html-webpack-plugin"); // 编译后的文件放到html文件var uglifyJsPlugin = webpack.optimize.UglifyJsPlugin;   // 文件压缩module.exports = {    entry: __dirname + "/src/js/app.js",    // 入口    output: {                               // 出口        path: __dirname + "/build",         // 出口路径        filename: "./js/[name]-[hash].js"   // 出口文件    },    plugins: [                              // 插件        new HtmlWebpackPlugin({                         filename: "index.html",         //模板生成后的文件            template: __dirname + "/src/index.html" // 模板        }),        new uglifyJsPlugin({                //压缩            compress: {                warnings: false            }        })    ],    module: {        loaders: [{            test: /\.css$/,            loader: "style-loader!css-loader"   // css 相关 loader        }]    },    resolve: {        extensions: [".js", ".css"]    }}

打包结果

webpack

这里写图片描述

index.html 运行结果：
这里写图片描述

阅读全文

0 0