webpack配置

安装非js文件先要安装loader  在配置rules

安装命令  https://www.webpackjs.com/guides/getting-started/

webpack使用步骤

  
    文档传送门
        https://www.webpackjs.com/guides/getting-started/
    初始化项目
        npm init -y
    安装webpack
        cnpm install webpack webpack-cli --save-dev
    创建项目基本结构
        
    在index.js中导入其他需要的代码
    运行 npx webpack 即可执行打包
        把index.js中的代码 以及他引入的所有代码
        合并到 dist下面的 main.js中
    如果要解析其他的资源 需要安装 对应的loader
        webpack默认只能够识别 js

在根目录下增加文件

webpack.config.js

 

// 导入 path模块

const path = require("path");

 

// 暴露出去

module.exports = {

  // 入口

  entry: "./src/index.js",

  // 出口

  output: {

    //  打包出来的文件名

    filename: "main.js",

    // 打包出来的保存路径

    path: path.resolve(__dirname, "dist")

  },

  devServer: {

    contentBase: "./dist"

  },

  module: {

    // 规则

    rules: [

      {

        // 以.css结尾的文件

        test: /\.css$/,

        // 通过 style-loader 和 css-loader去解析

        use: ["style-loader", "css-loader"]

      },

      {

        // 所有 png svg jpg gif 结尾的文件

        test: /\.(png|svg|jpg|gif)$/,

        // 用 file-loader去解析

        use: ["file-loader"]

      },

      {

        // 以less结尾的文件

        test: /\.less$/,

        // 使用 style-loader css-loader less-loader 去解析

        use: [

          {

            loader: "style-loader" // creates style nodes from JS strings

          },

          {

            loader: "css-loader" // translates CSS into CommonJS

          },

          {

            loader: "less-loader" // compiles Less to CSS

          }

        ]

      },

      {

        // 以scss结尾的文件

        test: /\.scss$/,

        use: [

          {

            loader: "style-loader" // 将 JS 字符串生成为 style 节点

          },

          {

            loader: "css-loader" // 将 CSS 转化成 CommonJS 模块

          },

          {

            loader: "sass-loader" // 将 Sass 编译成 CSS

          }

        ]

      }

    ]

  }

};

 

index.js文件中

// 导入jQuery 这里使用的是ES6的标准语法

import $ from "jquery";

 

// 导入 css 如果在代码中不需要使用的 可以不写 xxx from

import "./css/base.css";

 

// 引入图片

import icon from "./img/girl.png";

 

// 引入自己写的模块 自己使用Common.js的语法 写的模块

const tools = require("./lib/tools");

 

// 导入 less文件

// import './less/index.less';

// 导入 scss文件

import './sass/index.scss';

 

// 写的方法

function component() {

  // 创建div

  var element = document.createElement("div");

 

  $(element)

    .css("background", "green")

    .text("hello world");

 

  // 调用自己写的模块

  tools.sayHi();

 

  return element;

}

 

// 调用写的方法 创建了一个div 添加到了body上面

document.body.appendChild(component());

// 将图像添加到我们现有的 div。

// 创建了一个 img标签

var myIcon = new Image();

myIcon.src = icon;

document.body.appendChild(myIcon);