首页 > 代码库 > webpack学习

webpack学习

2024-09-25 14:16:39   216人阅读

app/index.js

function component () {
  var element = document.createElement(‘div‘);

  /* lodash is required for the next line to work */
  element.innerHTML = _.join([‘Hello‘,‘webpack‘], ‘ ‘);

  return element;
}

document.body.appendChild(component());

index.html

<html>
  <head>
    <title>webpack 2 demo</title>
    <script src="https://unpkg.com/lodash@4.16.6"></script>
  </head>
  <body>
    <script src="app/index.js"></script>
  </body>
</html>

可以看出其实有个隐形依赖，index.js中需要依赖lodash，然而可以看到该文件并没有声明lodash，他知识假设一个全局变量_存在。

对于管理js工程主要有两个问题：

1、如果没有依赖或者包含了错误的顺序（or is included in the wrong order），那么应用将不会运行

2、如果引用了该依赖却并没有使用，那么将会有很多无用的代码浏览器必须得下载

a、所以基于此，先安装依赖，npm install --save lodash,该命令会从npm.com查到需要的依赖安装到node_modules中，同时在package.json中添加依赖。

b、导入依赖后，在需要引用该依赖处导入import _ from "lodash"；

c、将该module打包，webpack index.js dict/bundle.js

根据一个模块声明了需要哪些依赖，webpack可以使用这些信息来创建一个依赖关系图，可以用这个关系图来生成一个优化包使得scripts能够按照正确的顺序被执行，并且无用的依赖也不会被包含在包内。

webpack会分析一个module所依赖的其他module，这些module都会包含在你的包中，webpack会给每个模块一个unique id唯一标识符

 

webpack只能处理js模块，对其他类型文件的处理需要使用loader进行转换。

可以理解为模块和资源的转换器，接收源文件作为参数，返回转换的结果，然后就可以通过require来加载任何类型的模块或文件。

有三种方式：

第一种在require()里告知需要的loader，require(‘style-loader!css-loader!./style.css‘);

css-loader是允许webpack识别.css的文件

style-loader是将webpack识别完的css文件中的内容，在编译完运行文件的时候，将这些css用style标签包起来嵌在head内

第二种是在webpack.config.js里对module进行配置，v1.*版本规则是：

 module: {
loaders: [
  {test: /\.js$/, loader: "babel", exclude: /node_modules/},
  {test: /\.jsx$/, loader: "jsx-loader"}
  {test: /.css$/, loader: ‘style!css‘} ]
  }

v2.*版本规则

 module: {
    rules: [
      {
        test: /\.css$/,
        use: extractCSS.extract([ ‘css-loader‘, ‘postcss-loader‘ ])
      },
      {
        test: /\.less$/i,
        use: extractLESS.extract([ ‘css-loader‘, ‘less-loader‘ ])
      },
    ]
  },

配置好后会从该配置里通过正则匹配来调用所需要的加载器。

 

！！！！！

代码分离：对第三方库和css进行代码分离，

以上的配置方式可以将css像js模块一样进行输出，这样有缺点必须得等所有js加载完成后才能通过style-loader将css渲染到屏幕上去，

通过plugin可以将css单独打包出来，使用

ExtractTextWebpackPlugin插件

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


 

webpack学习


联系
我们