Webpack学习理解

使用Webpack操作记录：

1 安装Node.js

下载地址：https://nodejs.org/zh-cn/download

2 Node.js安装完成之后，需要将node.exe的路径配置到环境变量之中，方便可以在命令窗口中直接使用

path=>node.exe所在路径

3 使用命令窗口安装webpack

中文文档：https://www.webpackjs.com/guides/installation/#local-installation

//安装最新的webpack
npm install --save-dev webpack
//如果你使用 webpack v4+ 版本，并且想要在命令行中调用 webpack，你还需要安装 CLI
npm install --save-dev webpack-cli

安装完成之后，需要配置环境变量
path=>webpack安装路径下的node_modules下的.bin文件夹
配置完成之后，webpack命令可用，可以进行使用了

4 创建相关项目

新建项目，在根目录中运行命令

npm init -y

会在根目录中创建"package.json",进行项目配置,学习过程中未进行任何修改；
在根目录下新建“src”文件夹，书写相关的业务逻辑，注意编写入口文件；

5 进行编译

在项目根目录中新建“webpack.config.js”文件

const path = require("path"); //Node.js内置模块
module.exports = {
  entry: './src/main.js', //配置入口文件
  output: {
    path: path.resolve(__dirname, '../CommonJS'), //输出路径，__dirname：当前文件所在路径
    filename: 'bundle.js' //输出文件
  }
}

在命令窗口中运行编译命令：

webpack --mode=development

待编译完成后，即可在网站中使用编写的逻辑；

6 注意：webpack也可以打包css文件

相关地址：https://www.webpackjs.com/concepts/
首先我们需要安装相关Loader插件，css-loader 是将 css 装载到 javascript；style-loader 是让 javascript 认识css

npm install --save-dev style-loader css-loader 

第二步，修改webpack.config.js，使用下载的插件

const path = require("path"); //Node.js内置模块
module.exports = {
  entry: './src/main.js', //配置入口文件
  output: {
    path: path.resolve(__dirname, '../CommonJS'), //输出路径，__dirname：当前文件所在路径
    filename: 'bundle.js' //输出文件
  },
  module: {
        rules: [  
            {  
                test: /\.css$/,    //打包规则应用到以css结尾的文件上
                use: ['style-loader', 'css-loader']
            }  
        ]  
    }

第三步，在入口文件中，引入需要的css文件

require('**.css');

第四步，进行编译即可。