webpack 模块加载兼打包工具——入门或进阶

时间：2022-11-01 18:42:17

一、 说点废话

1.webpack 是以 commonJS 的形式来书写脚本滴，但对 AMD/CMD 的支持也很全面，方便旧项目进行代码迁移。
2.能被模块化的不仅仅是 JS 了。
3.开发便捷，能替代部分 grunt/gulp 的工作，比如打包、压缩混淆、图片转base64等

二、 安装（首先你得知道npm包管理器？）

npm install webpack -g    //全局安装

安装到项目目录（比如我的项目目录是e:\develop，命令行切换到该项目下）

npm init
npm install webpack --save-dev

webpack基础安装完成

三、开始管理我们的项目

首先需要在项目目录里创建一个配置文件，说白了就是运行任务文件！webpack.config.js，所有打包，模块化管理都必须基于这个文件配置

在使用中会用到并需要安装的一丢丢 Loader，什么是 Loader？就是比如说我们项目中用了sass这种编译文件，那么我们怎么使用webpack实现编译？那就要用到loader了！
我的理解就是：本身在安装webpack的时候除了内置的一丢丢工具，其实我们还需要好多其他工具，那么就是Loader了！！

如下总结了一些Loader：

//**用于独立打包css文件**
npm install --save-dev extract-text-webpack-plugin  

//**babel es2015编译到es5 (babel-loader,babel-core,babel-preset-es2015)**
npm install --save-dev babel-loader 
npm install --save-dev babel-core 
npm install --save-dev babel-preset-es2015

//**es6安全使用脚架**
npm install --save-dev babel-polyfill   

//**项目安装webpack-dev-server服务**
npm install --save-dev webpack-dev-server  

//**全局安装webpack-dev-server服务**
npm install webpack-dev-server -g  

//**项目安装html-webpack-plugin@2r服务**
npm install html-webpack-plugin@2 --save-dev

//
css-loader 处理css中路径引用等问题
style-loader 动态把样式写入css
sass-loader scss编译器
less-loader less编译器
postcss-loader scss再处理
url-loader 图片处理
file-loader  文件处理
ejs-loader  ejs模版处理

webpack.config.js配置如下：

var webpack = require('webpack');
var path = require("path");
module.exports = {

 //页面入口文件配置
 //左边的为目标位置，右边为源文件位置
 entry: {
 "dev/build":__dirname+'/src/index.js',
 },

 //入口文件输出配置
 output: {
 path: __dirname+'/',
 filename: '[name].js'
 },

 plugins: [
 //公共模块打包插件（分片）
 //new webpack.optimize.CommonsChunkPlugin('common.js',["run/js/angular-all","run/js/app","run/css/style"])
 new webpack.optimize.CommonsChunkPlugin({
 //name:["read","read-common"],
 name:'read-common',
 chunks:["read/js/angular-lib","read/js/app","read/css/style"],
 minChunks: Infinity,

 })
 ],

 //Loaders配置
 module:{
 loaders:[
 {test:/\.css$/,loader:'style!css'},
 {test:/\.js$/,loader:'babel',exclude: /(node_modules|bower_components)/,query:{presets: ['es2015'],compact: false}},
 {test:/\.scss$/,loader:ExtractTextPlugin.extract('style', 'css!sass')},//'style!css!sass' },
 {test:/\.(png|jpg|svg)/,loader:'url?limit=20000&name=../[path][name].[ext]'} //不能大于20K图片
 ]
 }
}

/*****（打包CSS样式）**********************************
{ test:/\.css$/,loader:'style!css' }  
******（编译ES6）*************************************
{ test:/\.js$/,loader:'babel',exclude: /(node_modules|bower_components)/,query:{presets: ['es2015'],compact: false} }
******（编译SASS）************************************
{ test:/\.scss$/,loader:ExtractTextPlugin.extract('style', 'css!sass')},//'style!css!sass' },
******（转换图片路径，超过20K的转换成base64）**************
{ test:/\.(png|jpg|svg)/,loader:'url?limit=20000&name=../[path][name].[ext]' }
*****************************************************/

webpack-dev-server

npm install -g webpack-dev-server // 全局安装
npm install --save-dev webpack-dev-server //项目安装（不安装会发生意外！）

命令参数

图例：

webpack 模块加载兼打包工具——入门或进阶

webpack 模块加载兼打包工具——入门或进阶

  • [- -content-base < path > ] //访问根目录
  • [- - port < num >] //访问监听端口，默认8080

如何在webpack-config.js里配置

    //在module.exports里新增加入以下配置参数
    output: {
        publicPath: "/jiuxu/"
    },
    devServer: {
inline: true   //实时刷新
    }

html-webpack-plugin

这个插件用来简化创建服务于 webpack bundle 的 HTML 文件，尤其是对于在文件名中包含了 hash 值，而这个值在每次编译的时候都发生变化的情况。你既可以让这个插件来帮助你自动生成 HTML 文件，也可以使用 lodash 模板加载生成的 bundles，或者自己加载这些 bundles。

$ npm install html-webpack-plugin@2 –save-dev （安装包）

webpack.config.js配置如下

var HtmlWebpackPlugin = require('html-webpack-plugin')
//置入插件参数中
plugins: [
//可选参数往下看
new HtmlWebpackPlugin({
        title:"webpack create html"
    })
]

自动在 dist 目录中生成一个名为 index.html 的文件，内容如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>webpack create html</title>
</head>
<body>
<script src="index.js"></script> 
</body>
</html>

可选参数

  • title: 用来生成页面的 title 元素
  • filename: 输出的 HTML 文件名，默认是 index.html, 也可以直接配置带有子目录。
  • template: 模板文件路径，支持加载器，比如 html!./index.html
  • inject: true | ‘head’ | ‘body’ | false ,注入所有的资源到特定的 template 或者 templateContent 中，如果设置为 true 或者 body，所有的 javascript 资源将被放置到 body 元素的底部，’head’ 将放置到 head 元素中。
  • favicon: 添加特定的 favicon 路径到输出的 HTML 文件中。
  • minify:
    minify:{    //压缩HTML文件
        removeComments:true,    //移除HTML中的注释
        collapseWhitespace:false    //删除空白符与换行符
    }
  • hash: true | false, 如果为 true, 将添加一个唯一的 webpack 编译 hash 到所有包含的脚本和 CSS 文件，对于解除 cache 很有用。
  • cache: true | false，如果为 true, 这是默认值，仅仅在文件修改之后才会发布文件。
  • showErrors: true | false, 如果为 true, 这是默认值，错误信息会写入到 HTML 页面中
  • chunks: 允许只添加某些块 (比如，仅仅 unit test 块)
  • chunksSortMode: 允许控制块在添加到页面之前的排序方式，支持的值：’none’ | ‘default’ | {function}–default:’auto’
  • excludeChunks: 允许跳过某些块，(比如，跳过单元测试的块)

拯救ERROR

linux 安装sass-loader并执行webpack报错：
ERROR in Cannot find module ‘node-sass’

解决：
$ npm install -g cnpm –registry=https://registry.npm.taobao.org //安装cnpm国内源
cnpm install node-sass@latest –save-dev

ERROR：cannot find module ‘watchpack’
解l: Kill 删除整个项目，重新初始化

ERROR : Cannot find module ‘babel-plugin-transform-es2015-function-name’
解：我在2016年12月9号重新搭建了webpack，然后安装babel-es2015时就出现了上面的错误，之前特么是没有这个错误的。然后就安装了这个包：
npm install babel-plugin-transform-es2015-function-name –save-dev
然后特么就没有问题的，特么真特么坑

待续~~~
标签：

相关文章