webpack 公共import样式_webpack dynamic-import-webpack - CSDN
精华内容
参与话题
  • 我们可以在js中引入样式文件 require('myStyle.css') 这时我们便需要引入相应的webpack loader来帮助我们解析这段代码。 一般来说需要引入css-loader和style-loader,其中css-loader用于解析,而style-...

    我们可以在js中引入样式文件

    require('myStyle.css')

    这时我们便需要引入相应的webpack loader来帮助我们解析这段代码。

    一般来说需要引入css-loader和style-loader,其中css-loader用于解析,而style-loader则将解析后的样式嵌入js代码。

    // webpack配置如下
    {
      module: {
        loaders: [
          { test: /\.$/, loader: "style-loader!css-loader" }
        ]
      }
    }

    可以发现,webpack的loader的配置是从右往左的,从上面代码看的话,就是先使用css-loader之后使用style-loader。

    同理,如果你使用less来写样式的话,则需要先用less-loader来编译样式文件为css文件,再继续使用css-loader与style-loader。

    {
      module: {
        loaders: [
          { test: /\.$/, loader: "style-loader!css-loader!less-loader" }
        ]
      }
    }
    

    我们知道,webpack配置loader时是可以不写loader的后缀明-loader,因此css-loader可以写为css。

    将样式抽取出来为独立的文件

    将require引入的样式嵌入js文件中,有好处也有坏处。好处是减少了请求数,坏处也很明显,就是当你的样式文件很大时,造成编译的js文件也很大。

    我们可以使用插件的方式,将样式抽取成独立的文件。使用的插件就是extract-text-webpack-plugin

    基本用法如下

    var ExtractTextPlugin = require("extract-text-webpack-plugin");
    module.exports = {
      module: {
        loaders: [
          { test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader") }
        ]
      },
      plugins: [
        new ExtractTextPlugin("styles.css")
      ]
    }

    根据插件在github上的解释,ExtractTextPlugin.extract可以有三个参数。

    第一个参数是可选参数,传入一个loader,当css样式没有被抽取的时候可以使用该loader。

    第二个参数则是用于编译解析的css文件loader,很明显这个是必须传入的,就像上述例子的css-loader。

    第三个参数是一些额外的备选项,貌似目前只有传入publicPath,用于当前loader的路径。

    那什么时候需要传入第一个参数呢,那就得明白什么时候样式不会被抽取出来。

    了解过code splittiog的同学便会知道,我们有些代码在加载页面的时候不会被使用时,使用code splitting,可以实现将这部分不会使用的代码分离出去,独立成一个单独的文件,实现按需加载。

    那么如果在这些分离出去的代码中如果有使用require引入样式文件,那么使用ExtractTextPlugin这部分样式代码是不会被抽取出来的。

    这部分不会抽取出来的代码,可以使用loader做一些处理,这就是ExtractTextPlugin.extract第一个参数的作用。

    根据上面的案例,ExtractTextPlugin需要配合plugin使用。

    new ExtractTextPlugin([id: string], filename: string, [options])
    1. 该插件实例的唯一标志,一般是不会传的,其自己会生成。
    2. 文件名。可以是[name]、[id]、[contenthash]
      [name]:将会和entry中的chunk的名字一致
      [id]:将会和entry中的chunk的id一致
      [contenthash]:根据内容生成hash值
    3. options
      allchunk: 是否将所有额外的chunk都压缩成一个文件
      disable:禁止使用插件

    这里的参数filename里如何理解呢?上述案例指定了一个固定的名字,因此便会生成一个styles.css文件。

    那么像[name]、[id]这些如何理解。这个在你有多个entry的时候,便需要使用这种方式来命名。

    var ExtractTextPlugin = require("extract-text-webpack-plugin");
    module.exports = {
      entry: {
        "script": "./src/entry.js",
        "bundle": "./src/entry2.js",
      },
      ...
      module: {
        loaders: [
          { test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader") }
        ]
      },
      plugins: [
        new ExtractTextPlugin("[name].css")
      ]
    }

    这时候便会生成两个css文件,一个是script.css,另一个便是bundle.css。那些[id]、[contenthash]也是一个道理。

    只要明白,在你有多个entry是,一定要使用这种方式来命名css文件。

    最后还有那个allchunks又是什么呢?很简单,还记得前面提到的code splitting么?将该参数配置为true,那么所有分离文件的样式也会全部压缩到一个文件上。

    plugins: [
      new ExtractTextPlugin("[name].css", {allChunks: true})
    ]
    

    postcss

    以前我们写样式时,有些样式不同浏览器需要加不同的前缀,如-webkit-。现在有了构建工具,我们便不需要再去关注这些前缀了,构建工具会自动帮我们加上这些前缀。

    对于webpack我们自然想到需要使用loader或者plugin来帮助我们做这些事情,查了下发现autoprefixer-loader已经废弃不再维护了,推荐使用posscss

    postcss是用于在js中转换css样式的js插件,需要搭配其他插件一起使用,这点和babel6一样,本身只是个转换器,并不提供代码解析功能。

    这里我们需要autoprefixer插件来为我们的样式添加前缀。首先下载该模块。

    npm install autoprefixer --save-dev

    接着便可以配置webpack了

    var autoprefixer = require('autoprefixer')
    module.exports = {
      ...
      module: {
        loaders: [
          ...
          {
            {
              test: /\.css$/,
              loader: ExtractTextPlugin.extract(["css-loader", "postcss-loader"])
            },
          }
        ]
      },
      postcss: [autoprefixer()],
      ...
    }

    查看一下抽取出来的样式文件便可以发现已经加上了前缀

    a {
        display: flex;
    }
    /*compiles to:*/
    a {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex
    }

    另外autoprefixer还可以根据目标浏览器版本生成不同的前缀个数,例如你的应用的使用用户如果大多数是使用比较新版本的浏览器,那么便可以做如下配置。

    postcss: [autoprefixer({ browsers: ['last 2 versions'] })]
    

    这是生成的样式便会有些不一样,还是上面的例子

    a {
        display: flex;
    }
    /*compiles to:*/
    a {
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
    }

    postcss后记

    这里再说一个问题,有些童鞋可能会在css文件中使用@import引入其他样式文件,但是使用autoprefixer发现,import进来的样式没有处理,如下面所示:

    /*myStyle.css:*/
    body {
      background-color: gray;
    }
    .flex {
      display: flex;
    }
    
    /*myStyle2.css:*/
    @import "./myStyle.css";
    .div {
      color: red;
    }
    
    /*autoprefixer之后*/
    body {
      background-color: gray;
    }
    .flex {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
    }
    body {
      background-color: gray;
    }
    .flex {
      display: flex;
    }
    .div {
      color: red;
    }

    要解决这个问题,postcss有个解释,它让我们使用postcss-import插件,再配合autoprefixer

    postcss: function(webpack) {
      return [
        postcssImport({
          addDependencyTo: webpack
        }),
        autoprefixer
      ]
    },

    其实我们是不推荐使用@import的,心细的童鞋可以看到最后生成的样式文件有样式是重复的。

    所以一般我们应该是在js中使用require来引入样式文件。可以参考的说法这里

    样式压缩

    压缩代码我们可以使用webpack的内置插件UglifyJsPlugin来做,它既可以压缩js代码也可以压缩css代码。

    plugins: [
      ...
      new webpack.optimize.UglifyJsPlugin({
        compress: {
          warnings: false
        }
      }),
      ...
    ]

    其实并不能说是在压缩css代码,本质来说还是压缩js代码,再将这块代码输出到css文件中。

    使用CommonsChunkPlugin抽取公共代码

    首先要明确一点CommonsChunkPlugin是在有多个entry时使用的,即在有多个入口文件时,这些入口文件可能会有一些共同的代码,我们便可以将这些共同的代码抽取出来成独立的文件。明白这一点非常重要。(搞了很久才明白的一点,唉~~~~)

    如果在多个entry中require了相同的css文件,我们便可以使用CommonsChunkPlugin来将这些共同的样式文件抽取出来为独立的样式文件。

    module.exports = {
      entry: {
        "A": "./src/entry.js",
        "B": "./src/entry2.js"
      },
      ...
      plugins: [
        new webpack.optimize.CommonsChunkPlugin({name: "commons", filename: "commons.js"}),
        ...
      ]
    }

    当然,这里不止会抽取共同的css,如果有共同的js代码,也会抽取成为commons.js。

    这里有个有趣的现象,抽取出来的css文件的命名将会是参数中name的值,而js文件名则会是filename的值。

    CommonsChunkPlugin好像只会将所有chunk中都共有的模块抽取出来,如果存在如下的依赖

    // entry1.js
    var style1 = require('./style/myStyle.css')
    var style2 = require('./style/style.css')
    
    // entry2.js
    require("./style/myStyle.css")
    require("./style/myStyle2.css")
    
    // entry3.js
    require("./style/myStyle2.css")

    使用插件后会发现,根本没有生成commons.css文件。

    如果我们只需要取前两个chunk的共同代码,我们可以这么做

    module.exports = {
      entry: {
        "A": "./src/entry.js",
        "B": "./src/entry2.js",
        "C": "./src/entry3.js"
      },
      ...
      plugins: [
        new webpack.optimize.CommonsChunkPlugin({name: "commons", filename: "commons.js", chunks: ['A', 'B']}),
        ...
      ]
    }
    展开全文
  • demo地址: https://github.com/Lkkkkkkg/webpack-demo 继上一次配置完多页面 : ... 使用SplitChunksPlugin The CommonsChunkPlugin 已经从 webpack v4 legato 中移除, webpack 4...

    demo地址: https://github.com/Lkkkkkkg/webpack-demo
    继上一次配置完多页面 : https://blog.csdn.net/qq593249106/article/details/84933978

    使用SplitChunksPlugin

    The CommonsChunkPlugin 已经从 webpack v4 legato 中移除, webpack 4+ 版本使用内置的 SplitChunksPlugin 插件来进行公共部分的提取:

    配置 webpack.config.js

    因为 SplitChunksPlugin 是 webpack 4+ 版本内置的插件, 所以无需安装, 只需在 webpack.config.js 中配置

    optimization: {
            splitChunks: {
                cacheGroups: {
                    //打包公共模块
                    commons: {
                        chunks: 'initial', //initial表示提取入口文件的公共部分
                        minChunks: 2, //表示提取公共部分最少的文件数
                        minSize: 0, //表示提取公共部分最小的大小
                        name: 'commons' //提取出来的文件命名
                    }
                }
            }
        }
    

    注意

    还要在每一个页面的 HtmlWebpackPlugin 的 chunks 加上 commons, 因为提取之后的 commons 需要被打包出来的页面引用!

    webpack.config.js

    const path = require('path');
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    const CleanWebpackPlugin = require('clean-webpack-plugin');
    const MiniCssExtractPlugin = require("mini-css-extract-plugin");
    var devMode = false; //标志是否开发模式
    const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
    
    
    module.exports = {
        mode: 'development',
        entry: { //入口文件
            index: "./src/components/index/index.js",
            otherA: "./src/components/otherA/otherA.js",
            otherB: "./src/components/otherB/otherB.js",
        },
        output: {
            path: path.join(__dirname, 'dist'),
            filename: 'js/[name].js', //根据入口文件分为不同出口文件
        },
        devtool: 'inline-source-map', // 不同选项适用于不同环境
        devServer: {
            contentBase: './dist', //将dist目录下的文件(index.html)作为可访问文件, 如果不写这个参数则默认与webpack.cofig.js的同级目录
            port: 8080 //端口号设为8080, 默认也是8080
        },
        module: {
            rules: [ //配置加载器, 用来处理源文件, 可以把es6, jsx等转换成js, sass, less等转换成css
                {
                    exclude: /node_modules|packages/, //路径
                    test: /\.js$/, //配置要处理的文件格式,一般使用正则表达式匹配
                    use: 'babel-loader', //使用的加载器名称
                },
                {
                    test: /\.(sa|sc|c)ss$/,
                    use: [
                        devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
                        'css-loader',
                        'sass-loader',
                    ],
                },
            ]
        },
        plugins: [ //webpack 通过 plugins 实现各种功能, 比如 html-webpack-plugin 使用模版生成 html 文件
            new CleanWebpackPlugin(['dist']), //设置清除的目录
            new HtmlWebpackPlugin({
                template: "./src/components/index/index.html", //设置生成的HTML文件的名称, 支持指定子目录,如:assets/admin.html
                chunks: ['index', 'commons'], //指定入口文件
                filename: "index.html" //指定模板文件的位置
            }),
            new HtmlWebpackPlugin({
                template: "./src/components/otherA/otherA.html",
                chunks: ['otherA', 'commons'],
                filename: "otherA.html"
            }),
            new HtmlWebpackPlugin({
                template: "./src/components/otherB/otherB.html",
                chunks: ['otherB', 'commons'],
                filename: "otherB.html"
            }),
            new MiniCssExtractPlugin({
                filename: 'css/[name].css', //类似出口文件
            }),
            new OptimizeCssAssetsPlugin({
                assetNameRegExp: /\.css$/g, //一个正则表达式,指示应优化\最小化的资产的名称。提供的正则表达式针对配置中ExtractTextPlugin实例导出的文件的文件名运行,而不是源CSS文件的文件名。默认为/\.css$/g
                cssProcessor: require('cssnano'), //用于优化\最小化CSS的CSS处理器,默认为cssnano。这应该是一个跟随cssnano.process接口的函数(接收CSS和选项参数并返回一个Promise)。
                cssProcessorOptions: { safe: true, discardComments: { removeAll: true } }, //传递给cssProcessor的选项,默认为{}
                canPrint: true //一个布尔值,指示插件是否可以将消息打印到控制台,默认为true
            })
        ],
        optimization: {
            splitChunks: {
                cacheGroups: {
                    //打包公共模块
                    commons: {
                        chunks: 'initial', //initial表示提取入口文件的公共部分
                        minChunks: 2, //表示提取公共部分最少的文件数
                        minSize: 0, //表示提取公共部分最小的大小
                        name: 'commons' //提取出来的文件命名
                    }
                }
            }
        }
    };
    

    这里修改一下目录结构, 在 src 新建一个 common 文件夹, common 文件夹下新建一个 css 文件夹, 专门用来放公共的 css 文件, 新建一个 common.scss 放入 css 文件夹中, 测试能否打包这个公共的 scss:
    common.scss

    $fontSize: 100px;
    
    h1 {
      font-size: $fontSize;
    }
    
    |- /dist
      |- /css //分离出来的css文件
         |- index.css 
         |- otherA.css 
         |- otherB.css 
      |- /js
         |- index.js
         |- otherA.js
         |- otherB.js
      |- index.html
      |- otherA.html
      |- otherB.html
    |- /node_modules
    |- /src //用于放源文件的文件夹
      |- common //存放公共文件的目录
        |- css // 存放公共css的目录
          |- common.scss //公共css
       |- components //存放页面的目录
        |- index //主页
          |- App.js
          |- index.html 
          |- index.js
          |- index.scss
        |- otherA //另一个页面A
          |- App.js
          |- otherA.html 
          |- otherA.js
          |- otherA.scss
        |- otherB //另一个页面B
          |- App.js
          |- otherB.html 
          |- otherB.js
          |- otherB.scss
    |- package.json
    |- webpack.config.js //webpack配置文件
    

    修改一下 index.js, otherA.js, otherB.js, 让它们都引入公共样式 common.scss:
    index.js

    import React from 'react'
    import { render } from 'react-dom'
    import App from './App'
    import './index.scss'
    import '../../common/common.scss'
    
    render(<App />, document.getElementById("root"))
    

    otherA.js

    import React from 'react'
    import { render } from 'react-dom'
    import App from './App'
    import './otherA.scss'
    import '../../common/css/common.scss'
    
    render(<App />, document.getElementById("root"))
    

    otherB.js

    import React from 'react'
    import { render } from 'react-dom'
    import App from './App'
    import './otherB.scss'
    import '../../common/css/common.scss'
    
    render(<App />, document.getElementById("root"))
    

    打包

    终端输入 npm run build, 发现 dist 目录下的 css 和 js 文件夹分别多了 commons.css 和 commons.js, 而且其他 css 和 js 文件大小都变小了

    |- /dist
      |- /css //分离出来的css文件
         |- commons.css 
         |- index.css 
         |- otherA.css 
         |- otherB.css 
      |- /js
         |- commons.js
         |- index.js
         |- otherA.js
         |- otherB.js
      |- index.html
      |- otherA.html
      |- otherB.html
    |- /node_modules
    |- /src //用于放源文件的文件夹
      |- common //存放公共文件的目录
        |- css // 存放公共css的目录
          |- common.scss //公共css
      |- components //存放页面的目录
        |- index //主页
          |- App.js
          |- index.html 
          |- index.js
          |- index.scss
        |- otherA //另一个页面A
          |- App.js
          |- otherA.html 
          |- otherA.js
          |- otherA.scss
        |- otherB //另一个页面B
          |- App.js
          |- otherB.html 
          |- otherB.js
          |- otherB.scss
    |- package.json
    |- webpack.config.js //webpack配置文件
    

    打开 index.html, otherA.html, otherB.html:
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    公共样式 h1{font-size:100px} 起了效果, 提取公共 js&css成功

    展开全文
  • react+webpack中js和css的引入

    千次阅读 2018-04-10 20:20:22
    今天,打算写第一个页面,结果遇到了些阻力,没有想象的那么简单,有些特定的配置,还有组件的引用,还有css和js的加载模式。按照上一篇搭建的环境,...在index.js里面引入组件模块:import SearchRoom from './app/...

        今天,打算写第一个页面,结果遇到了些阻力,没有想象的那么简单,有些特定的配置,还有组件的引用,还有css和js的加载模式。

    按照上一篇搭建的环境,基本上是一个helloWorld了,接下来写第一个页面,首先我们将之前的入口文件删除,新建比如起名叫SearchRoom,创建入口文件index.js。


    在index.js里面引入组件模块:

    import SearchRoom from './app/SearchRoom/searchRoom.js';
    ReactDOM.render(<SearchRoom />, document.getElementById('root'));
    注意格式,index.html和之前的一样(保留的)。

    组件模块代码:

    class SearchRoom extends React.Component {
        render() {        
            return (<div>hahahaha
               </div>)}
    }
    export default SearchRoom

    启动:npm start

    并没有生成html文件,我们需要安装

    html-webpack-plugin

    并且在webpack.config.js里面进行配置

    const HtmlWebpackPlugin = require('html-webpack-plugin');
    const cleanWebpackPlugin = require('clean-webpack-plugin');
    model..exports = {
    ...
    plugins : [new HtmlWebpackPlugin({
            filename : 'index.html',
            template : 'src/index.html'
        }), new cleanWebpackPlugin(['dist/assets'])],
    ...


    这样就可以在指定,目录下生成编译后的html了。

    再次打包,就可以了,在组件里面编写react代码生成页面。

    然后就是样式的引入,明天的主要工作,样式有公共的样式和模块的样式引入配置。

    插曲:

     html-webpack-plugin插件:

           功能:自动帮你生成一个 html 文件,并且引用相关的 assets 文件(如 css, js)       

           基本用法:

                filename:  生成 html 文件的文件名。默认为 index.html.

                template(模板): 根据自己的指定的模板文件来生成特定的 html 文件。这里的模板类型可以是任意你喜欢的模板,可以是 html, jade, ejs, hbs, 等等,但是要注意的是,使用自定义的模板文件时,需要提前安装对应的 loader, 否则webpack不能正确解析。

    clean-webpack-plugin插件:

    功能: 用于在building之前删除你以前build过的文件

             基本用法:newCleanWebpackPlugin(paths [, {options}])

    paths: 数组,数组的每一个元素为要删除的路径。eg: ['dist/assets']

                今天的页面:


    关于样式的引入:

    1、公共css的引入

    引入相关插件后,修改配置:

    {
                test: /\.css$/,
                use: ['style-loader','css-loader'],
                exclude: /node_modules/
    }
    在jsx里面引入
    import './assets/css/iuapmobile.um.css';

    2、对于自己写的css

    先声明:

    import SearchRoomStyle from './searchRoom.css';

    创建css文件、然后写css:

    .cai {
    margin-top: 60px;
    }

    在js里面添加 className =“cai”,样式生效。

    下一篇将模块化,创建基本模块。

    使用react-router-dom,通过路由,实现页面的变化。





    展开全文
  • 提供公共模块 tpl模版的介绍(使用ejs语法) 代码接着上一章webpack学习笔记(二)环境分离+多页面开发配置 引入jq模块 各种基于mvc、mvvm框架的出现,单纯的jq已不适合这样的开发了,但如果是不使用...

    本章描述的主要功能

    • 引入jq模块
    • expose-loader 简单介绍
    • 提供公共模块
    • tpl模版的介绍(使用ejs语法)

    代码接着上一章webpack学习笔记(二)环境分离+多页面开发配置

    引入jq模块

    各种基于mvc、mvvm框架的出现,单纯的jq已不适合这样的开发了,但如果是不使用框架的项目,使用jq总比写原生好吧0.0

    既然都使用了webpack来开发,就不要使用<script>来引入

    npm i -D jquery

    然后回到index.js文件,通过require('jquery')引入jquery,顺便在index.html里面随便写点什么(前面两章写的已删除)

    /* index.js */
    import '../style/index.css';
    import '../style/less.less';
    import '../style/scss.scss';
    import '../style/sass.sass';
    
    const $ = require('jquery');
    
    console.log($);
    console.log($('#J-demo1').html());
    
    $('#J-btn1').click(function () {
        alert('hello');
    });
    
    
    /* index.html */
    <!DOCTYPE html>
    <html lang="en" dir="ltr">
        <head>
            <meta charset="utf-8">
            <title>webpack学习笔记(三)</title>
        </head>
        <body>
            <div id="J-demo1">引入jquery</div>
            <button id="J-btn1">点我呀</button>
        </body>
    </html>
    

    npm start运行可看到相关jquery的功能都已实现,$也被打印出来,但是你在控制台打印$ jQuery就会发现$并不是上述打印的$jQuery也会报错jQuery is not defined,说明我们使用的$ jQuery不是全局属性

    这里写图片描述

    expose-loader

    顾名思义,解析某个模块,然后暴露出去,如果不想使用全局属性那也就按照上述那样吧,但若将其设置为全局需要使用expose-loader来解析相应的模块,然后在webpack.js中添加其配

    npm i -D expose-loader

    /* webpack.js */
    {
    	// 通过require('jquery')来引入
        test: require.resolve('jquery'),
        use: [
            {
                loader: 'expose-loader',
                // 暴露出去的全局变量的名称 随便你自定义
                options: 'jQuery'
            },
            {
            	  // 同上
                loader: 'expose-loader',
                options: '$'
            }
        ]
    }
    

    跑起来,控制台打印$ jQuery,它们已属于全局变量,如果上述代码中的options值你自定义了的话,打印你的自定义名称,其就是jQuery方法,之后你可以在以index.js作为入口文件的任意.js文件里面调用$ jQuery

    提供公共模块(也可理解为公共chunk)

    在单页面开发中是否提取公共模块意义不大,但在多页面运用中就需要提取了,上一章中我们创建了index.html demo1.html demo2.html三个页面,也创建了同名的三个入口js文件,就拿上述的jQuery中,如果三个页面都需要使用呢?我们在三个入口文件里面引入jquery,查看打包结果,我们就写了几行代码,由于引入了jquery导致三个文件大小倍增

    这里写图片描述

    CommonsChunkPlugin

    使用CommonsChunkPlugin插件来提取公共模块,webpack中已集成了改插件,只需要调用即可,我们在webpack.prod.js里面使用该插件

    /* webpack.prod.js */
    ...
    new webpack.optimize.CommonsChunkPlugin({
    	// 提取出公共模块的chunkName,在html-webpack-plugin插件使用该chunkName
    	name: 'commons',
    	// 生成的公共模块文件路径和文件名 [name]是其chunkName 即commons
    	filename: 'static/js/[name].[hash].js',
    	// 模块被引用的最小次数,低于该次数将不会被提取
    	minChunks: 3
    })
    ...
    

    运行结果
    这里写图片描述

    但是目前只是提取出来,html里面并没有通过<script>来引入,我们已经知道公共模块其chunkName为commons,这就好办啦,修改webpack.jshtml-webpack-plugin配置即可,然后打包运行,html中也就引入了公共模块

    /* webpack.js */
    ...
    config.pageNames.forEach((page) => {
        const htmlPlugin = new HtmlWebpackPlugin({
            filename: `${page}.html`,
            template: path.join(__dirname, `../src/page/${page}.html`),
            // chunkName集合,page为当前入口文件chunkName commons为公共模块chunkName
            chunks: [page, 'commons']
        });
        HtmlPlugins.push(htmlPlugin);
        Entries[page] = path.join(__dirname, `../src/script/${page}.js`);
    });
    ...
    

    目前这种做法有一个缺点,那就是引用次数大于等于3的文件都会被打包进入公共模块,也就是说A页面其多个(大于等于3)子项模块引入了某个tool.js模块,然而B页面没有使用这个模块,tool.js这个模块也依然会被打包进入公共模块,然后被A、B两个页面加载,要解决这个问题就需要代码分割、按需加载,我们后续再提

    tpl模版(使用ejs语法)

    前提条件—了解ejs语法ejs传送门

    在开发过程中肯定会遇到一些公用,或者使用数据来渲染的模块,我们可以将这些模块制作成模版,传入指定参数来渲染,首先先下载 ejs-loader,用它来解析我们的模版,然后我们在src下面创建一个tpl文件夹并创建一个头部模版

    npm i -D ejs-loader

    这里写图片描述
    模版的路口同样是.js文件,通过其来引入样式或者html文件(这里创建不能起名叫.html,因为之前已经使用过对应的loader,否则会出错),你可以将其命名为.ejs .tpl .tem都行,只需要后缀不冲突即可,我们在外部引入该模版之后打印一下这个tpl,这里需要先在webpack.js里面加入对.tpl文件的解析,使用ejs-loader

    /* webpack.js */
    ...
    {
    	// 对模版文件使用loader
    	test: /\.tpl$/,
    	use: 'ejs-loader'
    }
    ...
    

    这里写图片描述
    控制台看结果
    这里写图片描述
    可以看到我们的通过import引入的tpl其实是一个函数,返回值是字符串类型的html语句,我们可以将返回值通过节点操作挂到DOM树上,并且我们也可以看到该函数需要传入一个对象参数tpl({namex: xxx, sex: xx}),如果是富文本的话也是支持传入,并不需要<%- xxx %>的写法,如下图栗子

    在这里插入图片描述
    在这里插入图片描述

    使用ejs的语法我们就能自由的创建字符串模版,这样就不再需要字符串拼接啦~

    tpl模版的基础原理就是这样,剩下的就自行慢慢进行各种骚操作吧,你可以把模版当作一个沙盒,数据都由外部传入,也可以反过来行之,怎么方便怎么来就好~

    到目前为止,算上前面两章,基础的webpack配置结构已经搞定,接下来加上一点点瓦片,让其能住得下人

    自定义端口号和局域网访问

    该项功能只适合开发环境,并且是和webpack-dev-server配套的,只需要在wepback.js加入devServer属性并传入相应的值,我们在config中定义端口号和局域网IP即可

    /* config.js */
    module.exports = {
    	...
        // 开发
        dev: {
            sourceMap: true,
            extract: false,
            // 局域网IP
            host: '192.168.11.105',
            // 端口号
            port: '2018'
        }
        ...
    };
    
    
    /* webpack.js */
    module.exports = {
    	...
    	devServer: {
    		host: config.dev.host,
           port: config.dev.port
    	}
    	...
    }
    

    显示打包进度

    webpak提供了现实百分比进度的命令--progress,我们只需要在package.json修改即可

    /* package.json */
    "scripts": {
        "start": "nodemon --watch build/ --exec \"webpack-dev-server  --progress --config build/webpack.dev.js\"",
        "build": "webpack --progress --config build/webpack.prod.js"
      }
    

    目前我也就只完成到这里,剩下的代码分割,按需加载,HMR等功能都也还在构建中,之后的笔记再提~

    依旧附上本章GitHub源码

    展开全文
  • Webpack常用插件总结

    千次阅读 2019-02-28 11:33:13
    刚完成一个基于React+Webpack的项目,渐渐地熟悉了Webpack的一些配置,开发过程中用到了不少Webpack插件,现在把觉得有用的Webpack插件总结一下当巩固学习啦,主要涉及热模块替换[Hot Module Replacement]、...
  • webpack系类之代码分割和懒加载

    千次阅读 2018-04-11 21:16:47
    webpack实现代码方式是主要是通过模块的引入方式 1.require.ensure //进行代码分割 require.ensure(['lodash'],function(){ var _ = require('lodash');//上边的require.ensure只会引入进来,但是并不会执行...
  • Webpack入门

    万次阅读 2016-08-11 11:24:47
    Webpack 是什么webpack是一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX)、coffee、样式(含less/sass)、图片等都作为模块来使用和处理。 简单说就是模块加载器,通过使用Webpack,能够像Node.js一样...
  • 今天是2018-11-14 ,这是7月份写的文章注意使用vue-cli3(webpack4),默认小于30k不会抽取为公共文件,包括css和js,已测试环境webpack4.6 + html-webpack-plugins 多页项目刚开始看文章说webpack4以上无法使用 ...
  • webpack2-webpack.config.js配置

    千次阅读 2017-02-23 15:23:11
     贴一个webpack.ocnfig.js 的配置属性表    一、代码分割:  1.插件 CommonsChunkPlugin :提取vendor的插件,过滤每一个入口文件,提取公共的模块,放到一个vendor.js文件中    2.css代码分割  2.1...
  • webpack4打包流程总结

    千次阅读 2018-08-31 16:08:48
    链接地址 :... webpack4入门   前提 已安装node(版本号&...JSX语法,ES6语法,LESS语法编写的模块转化为浏览器可执行的模块 ... 提取公共文件 无webpack.config.js配置打...
  • 本篇开始学习webpack打包的构建配置,所用版本为webpack 4.16.1和webpack-cli 3.2.3。 由于主要开发电商项目,所以对webpack配置生成多页面html更感兴趣。 配置生成html的插件采用html-webpack-plugin,主要作用是:...
  • webpack的面试题总结

    千次阅读 2019-07-25 20:53:51
    随着现代前端开发的复杂度和规模越来越庞大,已经不能抛开工程化来独立开发了,如react的jsx代码必须编译后才能在浏览器中使用;又如sass和less的代码...在众多前端工程化工具中,webpack脱颖而出成为了当今最...
  • 初探webpack4

    千次阅读 2018-06-10 22:17:59
    很多人都说webpack复杂,难以理解,很大一部分原因是webpack是基于配置的,可配置项很多,并且每个参数传入的形式多种多样(可以是字符串、数组、对象、函数。。。),文档介绍也比较模糊,这么多的配置项各种排列...
  • 开始(确认已经安装node环境和npm包管理工具) 1、新建项目文件名为vuedemo 2、npm init -y 初始化项目 ...4、npm install --save-dev webpack webpack-dev-server 安装webpackwebpack-dev
  • 阮一峰 Webpack 教程

    万次阅读 2018-10-29 13:06:15
    Webpack 教程是阮老师在 Webpack 1.x 的版本上做的。现在 Webpack 的版本已经改动较大,建议有基础的同学,就直接上官网看最新的就好了。这个教程可以用来了解下 Webpack 的前世今生。 开始 这个项目是一些简单的...
  • 通过webpack从零开始搭建React项目

    千次阅读 2019-04-26 14:12:21
    从零开始搭建React项目 1. Webpack基础概念 ...代码分割:提取多个页面的公共代码、提取首屏不需要执行部分的代码让其异步加载。 模块合并:在采用模块化的项目里会有很多个模块和文件,需要构建功...
  • 从零开始学习搭建webpack

    万次阅读 2020-10-12 14:11:51
    文章目录一、安装webpack2.安装webpack-cli二、打包三、 手动配置webpack1.基础配置entry 入口文件 output输出文件resolve 配置默认查询后缀devtool配置webpackDevSever配置HotModule Replacement 热模块更新proxy...
  • vue webpack自动化开发

    千次阅读 2016-12-15 19:17:40
    一.vue开发自动化 1. sudo cnpm install 安装node-module sudo cnpm install 2. 报错安装这些包 sudo cnpm install babel-plugin-transform-runtime css-...3.安装完成后webpack更新打包 webpack sudo cnpm ins
  • 最近用webpack+vue构建了一个移动端项目,摸石头过河遇到了不少坑,看这段时间也没有更新博客了,就记录一下自己在这个项目中遇到的一些技术点,分享出来。 本篇主要分享一下利用webpack搭建vue开发环境,前提电脑...
  • 用vue+webpack搭建的前端项目结构

    万次阅读 2017-09-13 08:54:32
    上个项目第一次用到vue+webpack,也是我第一次尝试自动化、模块化的开发方式,总的来说就是结构太烂,开发体验差,效率低,难维护。细数的罪状有如下几条 没有servies层,全部ajax接口都和逻辑混合在一起写 只有公众...
1 2 3 4 5 ... 20
收藏数 3,520
精华内容 1,408
关键字:

webpack 公共import样式