webpack 模块加载兼打包工具——入门或进阶_cannot find module 'watchpack-优快云博客

本文介绍了webpack的基础安装和项目配置，包括webpack-dev-server的使用、html-webpack-plugin的配置，以及解决在安装和使用过程中遇到的ERROR。还提到了Loader的概念，并列举了一些常见的Loader。在遇到node-sass和watchpack等模块找不到的问题时，提供了相应的解决办法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、说点废话

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 //项目安装（不安装会发生意外！）

命令参数

图例：

使用示例

这里写图片描述

[- -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
然后特么就没有问题的，特么真特么坑

待续~~~