zoukankan      html  css  js  c++  java
  • 入口配置多次

    初始化 npm init -y

    安装依赖 npm install *** --save-dev

    npm install --save-dev css-loader file-loader html-loader html-webpack-plugin less less-loader style-loader url-loader jquery extract-text-webpack-plugin webpack webpack-dev-server  uglifyjs-webpack-plugin

    稳定版本:自己安装的最新版本会出错,安装新版本,webpack.config.js中的loader不简写

    "devDependencies": {
    "css-loader": "^0.23.1",
    "extract-text-webpack-plugin": "^1.0.1",
    "file-loader": "^0.8.5",
    "html-loader": "^0.4.3",
    "html-webpack-plugin": "^2.9.0",
    "jquery": "^1.12.0",
    "less": "^2.6.0",
    "less-loader": "^2.2.2",
    "style-loader": "^0.13.0",
    "uglifyjs-webpack-plugin": "^1.1.4",
      "url-loader": "^0.5.7",
    "webpack": "^1.12.13",
    "webpack-dev-server": "^1.14.1"
    }

    主要目录结构:

    -root

      -src

        -css

          +common      #公共样式

          +lib     #引用全局样式

          +page           #对应页面样式

        +img

        -js

        -view

          index.html

          list.html

          about.html

      -dist                    #打包输出目录,自动生成无需建立

      +node_modules      #使用的nodejs模块

      package.json         #项目配置

      webpack.config.js   #webpack配置

      package-lock.json

    src/js/page/index.js    每个页面对应的js输入需要引入的css 及 js,其它同理:例

    require("../../css/lib/reset.css")
    require("../../css/common/global.css")
    require("../../css/common/grid.css")
    require("../../css/page/index.less")
    
    $('.g-bd').append('<p class="text">这是由js生成的一句话。</p>')

    src/view 输入需要的html结构,无需引入css,js,webpack将根据入口js文件实现按需加载。

    webpack.config.js

    var path = require('path')
    var webpack = require('webpack')
    /*将你的样式提取到单独的css文件里,不用担心样式会被打包到js文件里。 */
    var ExtractTextPlugin = require('extract-text-webpack-plugin');
    /*html-webpack-plugin插件,重中之重,webpack中生成HTML的插件*/
    var HtmlWebpackPlugin = require('html-webpack-plugin');

    /*压缩js*/
    var UglifyjsPlugin=require('uglifyjs-webpack-plugin');
    module.exports = {
      entry: { //配置入口文件,有几个写几个
        index: './src/js/page/index.js',
        list: './src/js/page/list.js',
        about: './src/js/page/about.js',
      },
      output: { 
        path: path.join(__dirname, 'dist'), //输出目录的配置,模板、样式、脚本、图片等资源的路径配置都相对于它
        publicPath: '/dist/',       //模板、样式、脚本、图片等资源对应的server上的路径
        filename: 'js/[name].js',     //每个页面对应的主js的生成配置
        chunkFilename: 'js/[id].chunk.js'   //chunk生成的配置
      },
      module: {
        loaders: [ //加载器,关于各个加载器的参数配置,可自行搜索之。
          {
            test: /.css$/,
            //配置css的抽取器、加载器
            loader: ExtractTextPlugin.extract('style-loader', 'css-loader') 
          }, {
            test: /.less$/,
            //配置less的抽取器、加载器。中间!有必要解释一下,
            //根据从右到左的顺序依次调用less、css加载器,前一个的输出是后一个的输入
            //你也可以开发自己的loader哟。有关loader的写法可自行谷歌之。
            loader: ExtractTextPlugin.extract('css!less')
          }, {
            //html模板加载器,可以处理引用的静态资源,默认配置参数attrs=img:src,处理图片的src引用的资源
            //比如你配置,attrs=img:src img:data-src就可以一并处理data-src引用的资源了,就像下面这样
            test: /.html$/,
            loader: "html?attrs=img:src img:data-src"
          }, {
            //文件加载器,处理文件静态资源
            test: /.(woff|woff2|ttf|eot|svg)(?v=[0-9].[0-9].[0-9])?$/,
            loader: 'file-loader?name=./fonts/[name].[ext]'
          }, {
            //图片加载器,雷同file-loader,更适合图片,可以将较小的图片转成base64,减少http请求
            //如下配置,将小于8192byte的图片转成base64码
            test: /.(png|jpg|gif)$/,
            loader: 'url-loader?limit=8192&name=./img/[hash].[ext]'
          }
        ]
      },
      plugins: [
        new webpack.ProvidePlugin({ //加载jq
          $: 'jquery'
        }),
        new webpack.optimize.CommonsChunkPlugin({
          name: 'vendors', // 将公共模块提取,生成名为`vendors`的chunk
          chunks: ['index','list','about'], //提取哪些模块共有的部分
          minChunks: 3 // 提取至少3个模块共有的部分
        }),
        new ExtractTextPlugin('css/[name].css'), //单独使用link标签加载css并设置路径,相对于output配置中的publickPath
        
        //HtmlWebpackPlugin,模板生成相关的配置,每个对于一个页面的配置,有几个写几个
        new HtmlWebpackPlugin({ //根据模板插入css/js等生成最终HTML
          favicon: './src/img/favicon.ico', //favicon路径,通过webpack引入同时可以生成hash值
          filename: './view/index.html', //生成的html存放路径,相对于path
          template: './src/view/index.html', //html模板路径
          inject: 'body', //js插入的位置,true/'head'/'body'/false
          hash: true, //为静态资源生成hash值
          chunks: ['vendors', 'index'],//需要引入的chunk,不配置就会引入所有页面的资源
          minify: { //压缩HTML文件  
            removeComments: true, //移除HTML中的注释
            collapseWhitespace: false //删除空白符与换行符
          }
        }),
        new HtmlWebpackPlugin({ //根据模板插入css/js等生成最终HTML
          favicon: './src/img/favicon.ico', //favicon路径,通过webpack引入同时可以生成hash值
          filename: './view/list.html', //生成的html存放路径,相对于path
          template: './src/view/list.html', //html模板路径
          inject: true, //js插入的位置,true/'head'/'body'/false
          hash: true, //为静态资源生成hash值
          chunks: ['vendors', 'list'],//需要引入的chunk,不配置就会引入所有页面的资源
          minify: { //压缩HTML文件  
            removeComments: true, //移除HTML中的注释
            collapseWhitespace: false //删除空白符与换行符
          }
        }),
        new HtmlWebpackPlugin({ //根据模板插入css/js等生成最终HTML
          favicon: './src/img/favicon.ico', //favicon路径,通过webpack引入同时可以生成hash值
          filename: './view/about.html', //生成的html存放路径,相对于path
          template: './src/view/about.html', //html模板路径
          inject: true, //js插入的位置,true/'head'/'body'/false
          hash: true, //为静态资源生成hash值
          chunks: ['vendors', 'about'],//需要引入的chunk,不配置就会引入所有页面的资源
          minify: { //压缩HTML文件  
            removeComments: true, //移除HTML中的注释
            collapseWhitespace: false //删除空白符与换行符
          }
        }),
    new UglifyjsPlugin(),
        new webpack.HotModuleReplacementPlugin() //热加载
      ],
      //使用webpack-dev-server,提高开发效率
      devServer: {
        contentBase: './',
        host: 'localhost',
        port: 9090, //默认8080
        inline: true, //可以监控js变化
        hot: true, //热启动
      }
    };

    package.json配置

    "build":"webpack",//打包
    "server":"webpack-dev-server --open"//启动

    项目:https://github.com/Rednuo/webpackMuiltPage.git



  • 相关阅读:
    阿里DatatX mysql8往 Elasticsearch 7 插入时间数据 时区引发的问题
    通俗易懂 k8s (3):kubernetes 服务的注册与发现
    ReplicaSet 和 ReplicationController 的区别
    使用Go module导入本地包
    k8s之statefulset控制器
    终于成功部署 Kubernetes HPA 基于 QPS 进行自动伸缩
    Atitit drmmr outline org stat vb u33.docx Atitit drmmr outline org stat v0 taf.docx Atitit drmmr out
    Atitit all diary index va u33 #alldiary.docx Atitit alldiaryindex v1 t717 目录 1. Fix 1 2. Diary deta
    Atitit path query 路径查询语言 数据检索语言 目录 1.1. List map >> spel 1 1.2. Html数据 》》Css选择符 1 1.3. Json 》map》
    Atitit prgrmlan topic--express lan QL query lan表达式语言 目录 1. 通用表达语言(CEL) 1 1.1. 8.2 功能概述 1 1.2. Ongl
  • 原文地址:https://www.cnblogs.com/redn/p/8065913.html
Copyright © 2011-2022 走看看