六角学院学习笔记JS-webpack篇

环境建立

首先建立资料夹webpack(可自订名称)并以vscode开启 按下ctrl+`(开启终端机)输入
npm init -y
产生package.json
没有跳出以下内容可输入 npm init 自定义或複製以下覆写内容

{  "name": "your-package-name",  "version": "1.0.0",  "description": "",  "main": "index.js",  "scripts": {    "test": "echo \"Error: no test specified\" && exit 1"  },  "keywords": [],  "author": "",  "license": "ISC"}

npm安装webpack
npm install --save-dev webpack webpack-cli
(npm可同时安装多个)
出现node_modules和package-lock.json就是成功了
package.json中的devDependency可看安装的版本号

进入点(entry)、输出点(output)

在目录中新增(entry)src资料夹，src内再新增index.js档案(两者名称为预设值，可于config.js中更改)
接者在package.json中找到scripts内加入 "build": "webpack"
terminal输入 npm run build 会出现dist资料夹及main.js(output)
index.js内容会显示在main.js中

自订entry、output

官网範例
目录新建
webpack.config.js

const path = require('path');module.exports = {  mode: 'development', //可切换为production  entry: './foo.js', //foo可自订 可新增foo.js确认(注意路径的位置 原本是在src中)  output: {    path: path.resolve(__dirname, 'dist'), //dist可自订    filename: 'foo.bundle.js', //foo.bundle可自订  },};//_dirname为当前路径

模式切换

在package.json 的scripts中加入    "dev": "webpack --mode development",    "deploy": "webpack --mode production"    terminal输入npm run dev(deploy)即可执行开发模式或上线模式

以下entry改回预设src/index.js

import 流程

在与index.js同层新增importTest.js(自订)内容加入export default "testText";index.js中加入import CustomName from "./importTest"; //CustomName(可自订)console.log(CustomName);terminal输入npm run deploy即可看到已载入 (npm run dev 也可 比较难找)

将bundle引入到html

在dist资料夹新增index.htmlbody中加入<script src="./foo.bundle.js"></script>Go Live即可检视

载入css-loader

termianl输入 npm install --save-dev css-loader还有 npm install --save-dev style-loadersrc内新增style.css[css-loader](https://webpack.js.org/loaders/css-loader/) module: {    rules: [      {        test: /\.css$/i,        use: ["style-loader", "css-loader"],      },    ],  },贴到webpack.config.js的module.exports中接者在index.js中import css from "./style.css"; //css(名称可自订)

载入 sass-loader(概念同上)

[scss-loader](https://v4.webpack.js.org/loaders/sass-loader/)terminal 输入 npm install sass-loader sass --save-devsrc内新增style.scssindex.js中 加入 import scss from "./style.scss";rules中 test修改为/\.s[ac]ss$/i use中新增"sass-loader"rules: [      {        test: /\.s[ac]ss$/i,        use: [          // Creates `style` nodes from JS strings          "style-loader",          // Translates CSS into CommonJS          "css-loader",          // Compiles Sass to CSS          "sass-loader",        ],      },    ],

载入webpack-dev-server(效果类似live server)

[npm连结](https://www.npmjs.com/package/webpack-dev-server)terminal输入 npm install webpack-dev-server --save-dev[webpack官网](https://webpack.js.org/configuration/dev-server/#devserver)在config.js的module.exports中加入以下物件devServer: {    static: {      directory: path.join(__dirname, 'dist'),  //dist可自订    },    compress: true,    port: 9000,    open: true,  }  接着将package.json scripts中dev指令的webpack改为webpack server接者输入npm run dev 即可自动更新(如同live server)再也不用无限输入npm run dev了!即可自动开启页面不用自己打127.xxx网址

载入axios

[npm axios](https://www.npmjs.com/package/axios)terminal 输入 npm i axios 若package.json出现axios版本表示安装成功在index.js中输入import axios from "axios"axios  .get("https://hexschool.github.io/ajaxHomework/data.json") //测试连结  .then((res) => console.log(res));回传物件成功表示已载入