webpack 个人配置

╰+攻爆jí腚メ 2022-06-16 11:06 220阅读 0赞

a.在全局中安装webpack：npm install webpack -g  
b.将webpack安装到项目并将webpack写入package.json的devDependencies中：进入项目根目录，然后在命令行中输入npm install webpack –save-dev。  
c.全局安装服务器：npm install webpack-dev-server -g  
d.在项目中安装并将依赖写在package.json文件中:npm install webpack-dev-server –save-dev

**\*命令行**

npm init //创建package.json
    npm install webpack-dev-server --save-dev //安装服务器，默认端口8080
    webpack-dev-server --hot --inline //自动打包
    npm install --save-dev json-loader //处理json文件
    npm install --save-dev style-loader css-loader //处理css文件
    npm install --save-dev file-loader  //处理img、png等图像文件

***webpack-config.js***

module.exports = {
      entry: __dirname + "/js/index.js",//打包文件入口
      output: {
        path: __dirname +"/js",//打包后的文件存放的地方
        filename: "hello.js"//打包后输出文件的文件名
      },
      module: {
       //在配置文件里添加loader
        loaders: [
          {
            test: /\.json$/,
            loader: "json"
          },
          {
            test: /\.(jpg|png)$/,
            loader: "file-loader"
          },
          {
            test:/\.css$/,
            loader:"style-loader!css-loader"
          }
    
        ]
      },
      devServer: {
        contentBase: "./",//本地服务器所加载的页面所在的目录
        port:"8080"
      } 
    }

方便每次启动服务器自动刷新，配置一下package.json,在scripts下面加上

"build":"webpack-dev-server --hot --inline"

在命令行里输入：

npm run build

回车即可。

发表评论取消回复

表情：

评论列表（有 0 条评论，220人围观）

还没有评论，来说两句吧...

相关阅读

相关 webpack简易配置

webpack基础配置文章查考 1、[https://blog.csdn.net/fengmin\_w/article/details/81984514][https_blo

小咪咪/ 2022年10月25日 04:46/ 0 赞/ 216 阅读

相关 webpack 个人配置

a.在全局中安装webpack：npm install webpack -g b.将webpack安装到项目并将webpack写入package.json的devDepen

╰+攻爆jí腚メ/ 2022年06月16日 11:06/ 0 赞/ 221 阅读

相关 webpack配置

1、初始化package.json文件 npm init -y 2、处理ES6语法安装：npm i babel-loader babel-core ba

淩亂°似流年/ 2022年06月13日 01:29/ 0 赞/ 232 阅读

相关 webpack 配置postcss

1、安装postcss-loader npm install --save-dev postcss-loader 2、然后配置webpack.config

我就是我/ 2022年05月29日 06:41/ 0 赞/ 193 阅读

相关 webpack配置

var path = require(‘path’); var MiniTextPlugin = require(‘mini-css-extract-plugin’);

快来打我*/ 2022年05月11日 09:30/ 0 赞/ 213 阅读

相关 webpack学习（一）：初步配置webpack

demo地址: [https://github.com/Lkkkkkkg/webpack-demo][https_github.com_Lkkkkkkg_webpack-dem

女爷i/ 2022年04月06日 05:27/ 0 赞/ 278 阅读

相关学习webpack（二）之 webpack配置

简述 > 当我们在终端中使用webapck命令时，默认首先查找是否存在webpack.config.js文件，如果存在，就使用这个文件中的配置；如果不存在，就使用终端上你

我不是女神ヾ/ 2022年04月03日 14:20/ 0 赞/ 337 阅读

相关 webpack的个人理解（一）

一、构建工具的介绍关于构建工具，我用过的也就webpack,gulp稍微有些了解，但是没在项目中真正用到。以我的理解，构建工具能实现的功能： 1. 代码转换：从ty

「爱情、让人受尽委屈。」/ 2022年01月20日 11:17/ 0 赞/ 231 阅读

相关 webpack配置

1.新建文件夹 webpack-demo vscode 打开文件 -》打开控制台（只要进入文件目录中） 2.初始化webpack webpack init -

小灰灰/ 2021年08月27日 22:56/ 0 赞/ 441 阅读

相关 react-webpack配置

webpack.config.dev.js 'use strict'; const autoprefixer = require('autopref

Dear 丶/ 2021年07月26日 11:42/ 0 赞/ 501 阅读