webpack前端项目搭建说明

最新推荐文章于 2024-04-17 00:05:59 发布

与大米一起成长

最新推荐文章于 2024-04-17 00:05:59 发布

阅读量130

点赞数

分类专栏：前端文章标签： webpack4 前后端分离前端项目搭建 node.js

本文链接：https://blog.csdn.net/bcmm2009/article/details/108045213

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

工程环境

安装npm

这个操作，建议各位使用度娘即可，如果搞不定，可放弃治疗。

初始化与包安装

先创建一个目录，比如 test-fe

环境初始化

npm init -y

-y 表示安装过程中所有选项都默认y，可以先不用参数装一遍，看一下。

webpack相关应用安装

npm i webpack -d
npm i webpack-cli -s -d 
npm i webpack-dev-server -s -d

webpack-cli：命令行客户端，webpack4，将server与cli分开了，要单独安装。
webpack-dev-server：webpack的server
-d开发环境
-s局部安装
-g全局安装

文件与配置

首先一个文件夹，命名src
进入src，创建index.js文件，功能是弹出一个"1"做测试，内容如下

alert(1)

返回src的上一级目录，创建index.html文件

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
  </head>
  <body>
    <script src="/dist/main.js"></script>
    <p>hello world</p>
  </body>
</html>

注意：这里引入的是/dist下的"main.build.js"文件

同目录下，新建webpack.config.js文件

var path = require('path');
var config = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname + '/dist'),
    filename: '[name].js',
    publicPath: '/dist/'
  }
}

entry: 引入文件，对象写法可以引入多文件

output：文件输出地址

path: 输出文件地址，即打包生成文件地址

filename：输出文件名，生成的文件所在的路径

publicPath：文件输出的公共路径

package.json的配置内容

{
  "name": "test-fe",
  "version": "1.0.0",
  "description": "test fe project test",
  "main": "index.js",
  "scripts": {
    "dev": "webpack-dev-server --mode=development --open --hot",
    "build": "webpack --mode=development --progress --hide-modules"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^4.2.0",
    "vue": "^2.6.11",
    "vue-loader": "^15.9.3",
    "vue-template-compiler": "^2.6.11",
    "webpack": "^4.44.1",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.0"
  },
  "dependencies": {}
}

重点注意scripts部分，关于运行模式的一些配置选项

最小工程化运行

执行npm run build进行构建
然后执行npm run dev,打开页面,弹出"1"

其他配置

引入loader兼容不同版本代码

npm i babel-loader babel-core babel-preset-env -d
npm install -D babel-loader @babel/core @babel/preset-env webpack
npm install -D babel-loader@7 babel-core babel-preset-env

第一种写法是默认写法，我在测试的时候遇到了问题，loader到了8版本，不兼容版本7的core和preset。
第二种写法是都更新到高版本
第三种写法是loader指定到7
babel-loader：代码兼容加载功能
babel-core：代码兼容的核心功能api，也就是核心的转换功能
babel-preset-env：预设的转化插件集合，包含了不同es规范间的翻译规则

修改 webpack.config.js

var path = require('path');
var config = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname + '/dist'),
    filename: '[name].build.js',
    publicPath: '/dist/'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {presets: ['@babel/preset-env']}
        }
      }
    ]
  }
}

module.exports = config;

build后运行即可

style-loader css-loader 配置css

npm i style-loader css-loader -d

style-loader：加载样式
css-loader：样式解析

src下创建一个public.css文件，内容如下：

.rect{
    background-color: red;
    width: 100px;
    height: 100px;
}

修改已有main.js文件，内容如下：

import './public.css'
alert(1)

let div = document.createElement("div");
div.className = "rect";
div.innerText = "hello div";
document.getElementsByTagName("body")[0].appendChild(div);

修改webpack.config.js文件，rules数组中，加入css的配置

{
  test: /\.css$/,
  use:['style-loader','css-loader'],
  include: path.resolve(__dirname + '/src/'),
  exclude: /node_modules/
}

编译后运行，看到页面结果

file-loader url-loader 文件加载

npm i file-loader url-loader -d

url-loader：有图片转base64的功能

修改webpack.config.js文件，rules数组中，加入file的配置

{      
  test: /\.(jpg|png|gif|svg)$/,      
  use: 'url-loader',      
  include: path.resolve(__dirname + '/src/'),      
  exclude: /node_modules/ 
}

在src中新建一个目录，命名assets，及其子目录images。从命名规范来说，assets一般放的是一起编译，使用相对路径引入的资源。

在index.html文件开头处加入一行代码

<img src="./src/assets/images/a.jpg" alt="">

编译后运行，看到页面结果

关注公众号“自然语言酷”，每周固定代码更新。

与大米一起成长

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack前端项目搭建说明

工程环境安装npm这个操作，建议各位使用度娘即可，如果搞不定，可放弃治疗。初始化与包安装先创建一个目录，比如 test-fe环境初始化npm init -y-y 表示安装过程中所有选项都默认y，可以先不用参数装一遍，看一下。webpack相关应用安装npm i webpack-cli -s -d npm i webpack-dev-server -s -d webpack-cli：命令行客户端，webpack4，将server与cli分开了，要单独安装。webpack-dev-s
复制链接

扫一扫