webpack学习
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了webpack学习相关的知识，希望对你有一定的参考价值。
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/[email protected]"></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学习的主要内容，如果未能解决你的问题，请参考以下文章
Vue报错：Uncaught TypeError: Cannot assign to read only property 'exports' of object 的解决方法(代码片段