webpack

最新推荐文章于 2024-07-28 00:56:04 发布

bingTangCSND

最新推荐文章于 2024-07-28 00:56:04 发布

阅读量548

点赞数 2

分类专栏：工具类文章标签：工具类

本文链接：https://blog.csdn.net/bingTangCSND/article/details/68954426

版权

工具类专栏收录该内容

3 篇文章 0 订阅

订阅专栏

gulp与webpack都是基于nodejs的

1.webpack是什么

在某个文件夹下，shift+右键即可在此处打开命令窗口

webpack是近期最火的一款模块加载器兼打包工具，支持AMD/CMD的写法，处理依赖关系，然后解析出各模块之间的依赖，将代码打包，把各种资源都作为模块来使用和处理。它能把各种资源，例如JS（含JSX）、coffee、样式（含less/sass）、图片等，能被模块化的不仅仅是 JS 了我们可以直接使用 require(XXX) 的形式来引入各模块，即使它们可能需要经过编译（比如JSX和sass）。

2.why要用webpack

页面中越来越多的js，客户端能做的事情越来越多，越来越多的的页面重载。这些现象导致了大量的前端代码，庞大的代码库需要高效的组织，而Module（组件式）开发的系统即为大多数开发者采取的途径。因为它将那么多文件打包成一个，减少请求次数，优化。开发便捷，能替代部分 grunt/gulp 的工作，比如打包、压缩混淆、图片转base64等。扩展性强，插件机制完善，特别是支持 React 热插拔（见 react-hot-loader ）的功能让人眼前一亮。

3.webpack怎么用

1．首先安装node，会自带npm，（npm是nodejs包管理和分发工具）通过npm把想要的库下载到本地
2.全局安装webpack
npm install webpack -g 全局安装webpack,
3.新建package.json文件即配置文件
在命令行对应的目录中输入 npm init即可创建配置文件
4.作为项目的开发依赖（devDependencies）安装
npm install webpack –save-dev
5.安装依赖本地安装gulp插件
使用样式表.css文件需要 css-loader,style-loader加载器，加载其他需要对应的加载器，
通过npm install xxx –save-dev安装这些加载器。
6.配置新建webpack.config.js文件
每个项目下都必须配置有一个 webpack.config.js ，它的作用如同常规的 gulpfile.js/Gruntfile.js ，
就是一个配置项，告webpack 它需要做什么。
7 引入
在入口文件例如 index.js中，通过require(),引入对应的需要打包的文件。
这样就可以在文件夹中直接通过webpack命令行 webpack来打包了。
8.Webpack是在静态文件下打包的，若想在服务器下打包需要用到webpack-dev-server 它是个轻量级的服务器，修改文件源码后，自动刷新页面就能把修改同步到页面上。在文件下abc下 npm install webpack-dev-server –g，全局安装webpack服务，npm install webpack-dev-server –save-dev写进依赖，最后，这样之后就可以在浏览器中通过 loaclhost:8080打开页面了，即此时是在本地的服务器下打开的，不是在静态文件下打开的。使用命令行webpack-dev-server –hot –inline实现自动刷新,此时还需要将index.html中引入的入口输出文件的路径改下，因为使用服务器打包时，打包后文件放在内存中。
9.运行webpack
webpack 的执行也很简单，直接执行
$ webpack –display-error-details
即可，后面的参数“–display-error-details”是推荐加上的，方便出错时能查阅更详尽的信息（比如 webpack 寻找模块的过程），从而更好定位到问题。
其他主要的参数有：

$ webpack --config XXX.js //使用另一份配置文件（比如webpack.config2.js）来打包

$ webpack --watch //监听变动并自动打包

$ webpack -p //压缩混淆脚本，这个非常非常重要！

$ webpack -d//生成map映射文件，告知哪些模块被最终打包到哪里了
10.关于配置文件
- （1）配置下入口文件和入口文件输出，在module中配置对应的加载器，

{
 entry: {
 page1: "./page1",
 //支持数组形式，将加载数组中的所有模块，但以最后一个模块作为输出
 page2: ["./entry1", "./entry2"]
 },
 output: {
 path: "dist/js/page",
 filename: "[name].bundle.js"
 }
}
来源： http://www.w2bc.com/Article/50764

entry 是页面入口文件配置，output是对应输出项配置，（即入口文件最终要生成什么名字的文件、存放到哪里）
上边的例子中，代码最终会生成一个page1.bundle.js和page2.bundle.js，
存放到./dist/js/page文件夹下。

（2）module.loaders是最关键的一块配置，它告知webpack每一种文件都需要用什么加载器来处理

extract-text-webpack-plugin 插件介绍：

Extract text from bundle into a file.从bundle中提取出特定的text到一个文件中。使用 extract-text-webpack-plugin就可以把css从js中独立抽离出来

网上查了很多资料，都是以下是在 npmjs官网上搜该插件时的结果
```
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")
    ]
}
来源： https://www.npmjs.com/package/extract-text-webpack-plugin
```

4.使用中的注意事项

照着配置一直不成功，需注意以下几点：
* a 虽然是css与js分离，仍然要将css或者scss文件引入到对应的入口文件
* b 我都是用scss写的代码，所以插件要用到scss里边，否则打包不成功。
即{test: /\.scss$/i, 
loader:ExtractTextPlugin.extract('style-loader','css!sass')},
// 三个loader将scss文件转化为css文件，然后将css文件从js中抽取出来