webpack的安装和使用（一）

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_38627581/article/details/80647595

webpack是一个静态模块打包工具，用于打包静态资源，例如项目中使用了less，sass，和stylus等css预处理器，而浏览器无法识别和编译，就需要一个webpack，打包后，直接在html文件中引入打包后的.js文件即可。

一、webpack的安装

1.打开命令窗口，全局安装webpack

npm install webpack -g

cnpm install webpack -g  (淘宝镜像，会更快一些)

2.全局安装webpack-cli

npm install webpack-cli -g

cnpm install webpack-cli -g

二、webpack创建并打包项目

1.新建一个空文件夹webpackDemo，进入该文件夹，按住shift，右键，在此处打开命令窗口

2.初始化

npm init

cnpm init

输入命令后，一路回车，然后会在当前文件夹中生成一个package.json文件

3.在当前文件夹下安装webpack（局部的）

cnpm install webpack --save-dev

npm install webpack --save-dev

完成后会在当前文件夹中生成一个node_modules文件夹

4.在webpackDemo文件夹下建立两个文件夹，一个src，用于存放需要打包的源代码，一个build，用于存放打包后的bundle.js文件，随便写点内容做测试

5.在根目录webpackDemo下创建webpack.config.js，用来配置webpack

module.exports = {
    entry: __dirname + '/src/main.js', // 用来指定入口文件
    output: {
        path: __dirname + '/build', // 用来指定输出文件的存放路径
        filename: "bundle.js" // 用来指定输出文件的名称
    },
    module: {
        rules: [
            {
                test:/\.css$/, // 用于标识出应该被对应的loader进行转换的某个或某些文件
                loader: "style-loader!css-loader" // 标识进行转换时应该使用哪个loader
            },
            {
                test:/\.scss$/,
                loader: "style-loader!css-loader!sass-loader"
            }
        ]
    }
};

6.安装对应loader

npm install style-loader css-loader sass-loader node-sass -S

cnpm install style-loader css-loader sass-loader node-sass -S

7.打包

webpack

打包完成后，在build文件夹下会多一个bundle.js文件，在.html文件中引入，即可使用

注意：

    如果网速允许的情况下尽量使用npm安装模块，cnpm可能会导致模块安装不完全而报错