webpack配置

1.首先需要全局安装webpack

• 安装node(node提供了npm)

• 设置淘宝镜像: nodejs的模块(插件)存放在网站,https://www.npmjs.com,淘宝镜像会同步该网站的模块 设置方法: npm config set registry http://registry.npm.taobao.org/

• 文档地址: https://www.webpackjs.com

• npm install webpack -g

• npm install webpack-cli -g

入口和出口的配置

1、先建一个文件夹， 在新那个文件夹的目录下 初始化package.json 就是npm init -y(加-y是直接生成了 省去那些步骤)，
2、新建一个文件webpack.config.js(固定的)
3、配置出口和入口

• 入口: 项目从哪里开始打包,打包的过程中,把相关的文件全部打成一个包, ps:入口文件通常叫main.js
• 出口: 打包完成之后,文件名叫什么,就放到哪里

// 导入path模块，path是nodejs自带的模块，作用是用来处理路径相关的事情
const path = require('path');

const config = {
    // 配置入口文件，告诉webpack从哪里开始打包
    entry: './main.js', // 在文件夹的根目录创建一个main.js文件 这是一个入口文件
    // 配置出口 output是输出的意思
    output: {
        // 配置输出的路径
        // __dirname是当前目录的意思，打包好的文件放在当前的dist文件夹内，dist文件会自动生成
        path: path.resolve(__dirname, 'dist'),  
        // 打包后的js文件名称
        filename: 'ygg.js'  // 这个名字可以随便起 
    },
    // 模式配置  development代码不压缩, production压缩代码  默认为压缩
    mode: 'production'
};

// 导出配置
module.exports = config;

4、做完上述的步骤之后就可以在终端中执行webpack(目录为我们建的那个文件夹下)

loader配置

1、配置css-loader(步骤)

• 新建一个文件夹

• 初始化package.json npm init -y

• 配置入口和出口

• 配置css-loader

  • 在npmjs.com找到css-loader,安装上面的说明进行配置
  • 配置好之后,执行打包命令
  • 新建一个html文件把打包出来的js文件放进去html运行检查效果(在根目录下创建一个css文件，然后在main.js引入require('./style.css');)
  • 注: css-loader依赖style-loader,所以要安装style-loader npm i style-loader --save-dev
    配置less-loader

• 配置方法类似css-loader

配置好的文件如下

const path = require('path');

module.exports = {
    entry: './main.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'ygg.js'
    },
    mode: 'development',
    module: {
        rules: [
          {
            test: /\.css$/,
            use: ['style-loader', 'css-loader'],
          },
        ],
      }
}

plugins插件配置

• html插件 html-webpack-plugin
  • 安装 npm i html-webpack-plugin --save-dev
  • 导入html-webpack-plugin模块
  • 配置(webpack文档)
  • 踩坑: Cannot find module 'webpack/lib/node/NodeTemplatePlugin' 解决方案 npm link webpack --save-dev； json-parse-better-errors遇到这个问题可能是webpack坏掉了，需要卸载掉webpack然后重新下载