webpack配置项目

最新推荐文章于 2024-08-09 07:30:56 发布
最新推荐文章于 2024-08-09 07:30:56 发布
阅读量318 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36262295/article/details/115006566
版权

一、项目初始化

npm init -y
npm install --save-dev webpack
npm install webpack-cli -D

创建 webpack.config.js文件 在文件中输入代码：

let path=require("path")		//引用node核心模块 => 路径
module.exports={
    mode:"production", 			//打包后文件模式 两种 => development production
    entry:'./src/index.js',		//入口文件位置
    output:{
        filename:'bundle.[hash:8].js',  		//文件名称
        path:path.resolve(__dirname,"dist"),	//打包后的文件地址为绝对路径 名称为’dist'
        publicPath:''	//给所有打包文件引入时加前缀，包括css、js、img，如果只想处理图片可以单独在url-loader配置中加publicPath
    }
}

运行：

npx webpack

【可选】在package.json文件中 ，添加脚本代码如下：

"scripts":{
    "build":"webpack --config webpack.config.my.js"	//可以操作重命名后的webpack.config.js文件
}

运行：

npm run build

二、本地服务

使用简单的服务插件 webpack-dev-server, 在内存中启动

npm install webpack-dev-server -D

运行：

npx webpack-dev-server

[可选] 在webpack.config.js文件中添加服务代码：

devServer:{				//开发服务器配置
    port:3000,		//端口号
    progress:true,		//是否显示进度条
    contentBase:'./dist',	//服务器启动的位置
    open:true,				//自动打开浏览器
    compress:true			//gzip压缩
    hot:true				//启动热更新
}

【可选】在package.json文件中加入代码：

"scripts":{
    "dev":"webpack-dev-server --open"		//添加 --open 自动打开浏览器
 }

运行：

npm run dev

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9tnQ7kg3-1616136915365)(C:\Users\jfq\AppData\Roaming\Typora\typora-user-images\1614309130932.png)]

此报错解决方案：

npm uninstall -D webpack-cli
npm install -D webpack-cli@3

三、loader

  • loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）；
  • loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块

在webpack.config.js文件中配置代码：

module.exports = {
  module: {				//模块
    rules: [			//规则
      { test: /\.css$/, use: 'css-loader' }
    ]
 }
};

推荐使用yarn 进行安装

3.1 处理CSS

包括css less sass 必须在js文件中导入 import ‘.css’

3.1.1 处理css文件

1、安装 style-loader css-loader 模块

npm install style-loader css-loader -D

2、在webpack.config.js文件中配置代码：

//css-loader  用来解析@import这种语法
//style-loader 用来把css插入 header 标签中

//loader的执行顺序：默认是从右向左，从下向上

module.exports={
    module:{
        rules:[
        	//{test:/\.css$/,use:['style-loader','css-loader']}	//use可以写成string array object
        	{
                test:/\.css$/,
                use:[{
                    loader:"style-loader",
                    options:{
                        insertAt:"top"		//将css放到body上面；1.0版本已经放弃；现在不使用
                    }
                },
                "css-loader"
                ]
        	}
        ]
    }
}

3.1.2 处理less文件

1、安装 style-loader css-loader less-loader 模块 和 less 模块

npm install style-loader css-loader less-loader -D

2、在webpack.config.js文件中配置代码：

module.exports={
    module:{
        rules:[
        	{
                test:/\.less$/,
                use:[
                {
                    loader:"style-loader",
                },
                "css-loader",
                "less-loader"
                ]
        	}
        ]
    }
}

3.1.3 处理sass文件

  1. 安装style-loader css-loader sass-loader 模块 和 sass 模块
  2. 用法跟less一样；

3.1.4 css兼容处理

1、安装 “postcss-loader autoprefixer” 模块

yarn add postcss-loader autoprefixer -D

2、postcss 需要配置文档 postcss.config.js

module.exports = {
    plugins: {
      // 兼容浏览器，添加前缀
      'autoprefixer':{
          overrideBrowserslist: [
            "Android 4.1",
            "iOS 7.1",
            "Chrome > 31",
            "ff > 31",
            "ie >= 8"
            //'last 10 versions', // 所有主流浏览器最近10版本用
        ],
        grid: true
      }
    }
}

3、在 “webpack.config.js”文件中添加配置：

// css
{
  test: /\.css$/, 
  use: [
    MiniCssExtractPlugin.loader,
    'css-loader',   
    'postcss-loader'
  ]
}
// less
{
  test: /\.less$/, 
  use: [
    MiniCssExtractPlugin.loader,
    'css-loader',                   
    'postcss-loader',
    'less-loader'                   
  ]
},

3.2 处理JS

3.2.1 ESLint语法检测

npm install eslint-config-airbnb-base eslint-plugin-import eslint eslint-loader -D

webpack.config.js中配置

/*
eslint语法检查：eslint-loader eslint
注意：只检查自己的js代码，第三方的库是不用检查的
设置检查规则：
packag.json中eslintConfig中设置~
   "eslintConfig":{
       "extends":"airbnb-base"
    }
aribnb --> eslint-config-airbnb-base eslint-plugin-import eslint
*/
{
   test:/\.js$/,
   exclude:/node_modules/,
   loader: 'eslint-loader',
   options:{
      fix:true//eslint自动修复格式错误
   }
}

3.在package.json中配置eslintConfig

"eslintConfig": {
    "extends": "airbnb-base"
  }

4.如果配置完成后，打包时出现Resolve error: unable to load resolver “node” src\main.js:1:1 错误，请安装下面的依赖后再打包

npm install eslint-import-resolver-node -D

3.2.2 JS兼容处理

因为es6语法不兼容部分浏览器，所以要对项目进行配置

1.安装依赖

npm install babel-loader @babel/preset-env @babel/core core-js -D //第一三方法安装这个
@babel/core 核心代码
@babel/preset-env 预先设置不同的环境,转换不同浏览器兼容的代码
core-js 模拟JS运行环境

npm install  @babel/polyfill -D //第二个方法安装这个

2.三种方法兼容

（1）babel-loader @babel/preset-env @babel/core 兼容

​ 只能兼容基本的语法，但是像是promise语法，无法进行兼容

（2）兼容全部js语法 @babel/polyfill

在index.js中引入依赖即可

import ‘@babel/polyfill’

缺点：全部兼容造成打包文件太大

（3）core-js 配合第一种进行按需兼容

3.配置详情（下面是将eslint检查与js兼容配置放在了一起，module中不可以对.js文件(同一种文件)进行多次匹配，多次匹配只会匹配第一个，所以要结合在一起）

{
    test:/\.js$/,
    exclude:/node_modules/,
    use:[
 		//要优先执行eslint-loader，可使用配置enforce:'pre'　
        {
            loader: 'eslint-loader',
            options:{
                fix:true	//eslint自动修复格式错误
            }
        },
        //js兼容性处理：babel-loader @babel/preset-env @babel/core
        {
            loader: 'babel-loader',
            options:{
                //预设：指示babel做怎么样的兼容性处理
                presets:[
                    [
                        '@babel/preset-env',
                        {
                            // 按需加载
                            useBuiltIns: 'usage',
                            // 指定core-js版本
                            corejs: {
                                version: 3,
                            },
                            // 指定兼容浏览器版本范围
                            targets: {
                                chrome: '70', // 谷歌版本70及以上
                                firefox: '62',
                                ie: '9',
                                safari: '10',
                                edge: '17',
                            }
                        }
                    ]
                ]
            }
        }
    ]
},

所以一般采用第一种加第三种组合进行.js文件兼容，也就是上面贴的代码。

第二种具体引入方式如下，不建议使用

{
      test:/\.js$/,
      exclude:/node_modules/,
      loader:'babel-loader',
      options:{
           presets:['@babel/preset-env']
      }
}

img

3.3 处理其他文件

3.2.1 处理路径

  1. 安装 file-loader 插件 可以处理 图片、字体等
npm install --save-dev file-loader
  1. 在webpack.config.js文件中添加代码配置：
 module.exports = {
    module: {
      rules: [
        {
         test: /\.(png|svg|jpg|gif)$/,  //图像的格式，也可以判断字体文件/\.(woff|woff2|eot|ttf|otf)$/
         use: [
          'file-loader'
         ]
        }
      ]
    }
  };

*解析html中的img 如

yarn add html-loader -D

{
  test: /\.html$/,
  use: 'html-loader'
}

3.2.2 当图片小于多少，用base64编码

yarn add url-loader -D

//如果过大，才用file-loader
{
  test: /\.(png|jpg|gif)$/,
  // 当图片小于多少，用base64,否则用file-loader产生真实的图片
  use: {
    loader: 'url-loader',
    options: {
      limit: 200 * 1024,          // 小于200k变成base64
    }
  }
}

3.2.3 打包分类

1.图片分类

{
  test: /\.(png|jpg|gif)$/,
  // 当图片小于多少，用base64,否则用file-loader产生真实的图片
  use: {
    loader: 'url-loader',
    options: {
      limit: 1,  // 200k 200 * 1024
      outputPath: 'img/'   // 打包后输出地址 在dist/img
    }
  }
},

2.css分类

plugins: [
  new MiniCssExtractPlugin({
    filename: 'css/main.css'
  }),
]

3.希望输出的时候，给这些css、img加上前缀，传到服务器也能访问:

output: {
  filename: 'bundle.[hash:8].js',   // [hash:8] 只显示8位hash
  path: path.resolve(__dirname, 'dist'),
  publicPath: 'http://www.mayufo.cn'  // 给静态资源统一加
},

如果只处理图片路径：

{
  test: /\.(png|jpg|gif)$/,
  // 当图片小于多少，用base64,否则用file-loader产生真实的图片
  use: {
    loader: 'url-loader',
    options: {
      limit: 1,  // 200k 200 * 1024
      outputPath: '/img/',   // 打包后输出地址
      publicPath: 'http://www.mayufo.cn'
    }
  }
}

四、插件[plugins]

4.1html-webpack-plugin

使用‘html-webpack-plugin’插件自定义打包html文件

npm install html-webpack-plugin -D

在webpack.config.js文件中，添加配置代码：

const htmlWebpackPlugin = require('html-webpack-plugin')	//引入插件

plugins:[		//放置所有的webpack插件
    new htmlWebpackPlugin({			//用于使用模板打包时生成文件
        template:'',	//模板文件
        filename:'',	//打包后生成的文件
        hash:true,		//添加hash值解决缓存问题
        minify:{
            removeAttributeQuotes:true,	//删除属性双引号
            collapseWhitespace:true	//折叠空行变为一行
        }
    })
]

4.2 mini-css-extract-plugin

抽离css样式，成单独文件

npm install mini-css-extract-plugin -D

在webpack.config.js中配置：

const MiniCssExtractPlugin = require('mini-css-extract-plugin')

// 压缩css

module.exports={
    plugins: [
      new MiniCssExtractPlugin({
          filename: 'css/main.css'		//输出文件名
      })
    ],
    module:{
        rules:[
            {
              test: /\.css$/,   // css 处理
              use: [
                // {
                //     loader: 'style-loader',
                // },
                // 此时不需要style-loader
                MiniCssExtractPlugin.loader,   // 抽离
                'css-loader', // css-loader 用来解析@import这种语法,
                'postcss-loader'
              ]
            }
        ]
    }   
}

4.3 压缩css，js代码

yarn add optimize-css-assets-webpack-plugin -D
yarn add uglifyjs-webpack-plugin -D

2、在webpack.config.js文件中配置代码：

// 用了`mini-css-extract-plugin`抽离css为link需使用`optimize-css-assets-webpack-plugin`进行压缩css,使用此方法压缩了css需要`uglifyjs-webpack-plugin`压缩js
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin")	//压缩css
const UglifyJsPlugin = require("uglifyjs-webpack-plugin")						//压缩js

module.exports = {
  optimization: {              // 优化项
    minimizer: [
      new UglifyJsPlugin({     // 优化js
        cache: true,           // 是否缓存
        parallel: true,        // 是否并发打包
        // sourceMap: true     // 源码映射 set to true if you want JS source maps
      }),
      new OptimizeCSSAssetsPlugin({})    // css 的优化
    ]
  },
  mode: 'production',
  entry: '',
  output: {},
}

五、配置优化项

5.1 模块热更新（HMR）

只存在于开发环境，哪块更新只更新那块

  • 配置热更新，在devServer中配置hot，开启HMR功能
 devServer:{
        contentBase: resolve(__dirname,'build'),//自动构建目录，打包后的文件夹
        compress:true,
        port:3000,
        open:true,
        hot:true		//开启热更新
    }

此时样式文件已经可以实现热更新，因为style-loader内部实现了,但是js和html文件会出现问题。

（1）解决html文件问题，将entry改为数组，引入index.html文件，

html文件：默认不能使用HMR功能，同时会导致问题：html文件不能热更新(不用做HMR功能)

 entry:['./src/index.js','./src/index.html'],

（2）解决js文件问题，配置js文件

js文件：默认不能使用HMR功能 --需要修改js代码，添加支持，入口js文件是没法处理的，这里处理非入口的print.js文件

import print from './print'

print();

if(module.hot){
    //一旦 module.hot 为true,说明开启了HMR功能。 -->让HMR功能代码失效
    module.hot.accept('./print.js',function(){
        //方法会监听 print.js文件变化，一旦发生变化，其他模块不会重新打包构建。
        //会执行后面的回调函数
        print();
    })
}

5.2调试工具（devtool）

利于代码调试，显示报错准确行数；

devtool: 'source-map'  //cheap-module-souce-map

参数介绍

/**
 * source-map :一种提供源代码到构建后代码的映射技术（如果构建后代码出错，可以通过映射追踪源代码错误）
 * [inline-|hidden-|eval-][nosources-][cheap-[module-]]source-map
 * 
 * source-map:外部
 *  错误代码准确信息 和 源代码的错误位置
 * inline-source-map:内联
 * 错误代码准确信息 和 源代码的错误位置
 * 只生成一个内联source-map
 * hidden-source-map:外部
 * 错误代码的错误原因，但是没有错误位置
 * 不能追踪源代码错误，只能提示到构建后代码的错误位置
 * eval-source-map:内联
 * 每个文件都生成对应的source-map，都在eval
 * 错误代码准确信息 和 源代码的错误位置
 * nosources-source-map:外部
 * 能找到错误代码的准确信息，但是没有任何源代码信息
 * cheap-source-map:外部
 * 提示错误信息，和源代码的错误位置，但是只能精确到某一行
 * cheap-module-source-map
 * 错误代码准确信息 和 源代码的错误位置
 * module会将loader的source map加入
 * 
 * 内联 和 外部的区别：1.外部生成了文件，内联没有  2.内联构建速度更快
 * 
 * 开发环境：速度快，调试更友好
 *   速度快(eval>inline>cheap>...)
 *      eval-cheap-source-map
 *      eval-source-map
 *   调试更友好
 *      souce-map
 *      cheap-module-source-map
 *      cheap-source-map
 * 
 *    --> eval-source-map 调试更友好/  eval-cheap-module-source-map 性能更好
 * 
 * 生产环境：源代码要不要隐藏？调试要不要更友好
 *    内联会让代码体积变的非常大，所以在生产环境中不使用内联
 *    nosources-source-map 代码全部隐藏
 *    hidden-source-map 只隐藏源代码，会提示构建后代码错误信息
 * 
 *    -->source-map / cheap-module-souce-map
 */

react项目中devtool配置如下

devtool: isEnvProduction
      ? shouldUseSourceMap
        ? 'source-map'
        : false
      : isEnvDevelopment && 'cheap-module-source-map',

5.3 提高匹配效率 oneOf

提高loader匹配效率，使用方法如下，匹配到一个loader后，后面的就不会再继续匹配了。

注意：不能有两个配置处理同一种类型文件
module:{
        rules:[
            {
                test:/\.js$/,
                exclude:/node_modules/,
                // //优先执行
                enforce:'pre',
                loader:'eslint-loader',
                options:{
                    fix:true
                }
            },
            {
                //下面的loader只会匹配一个，处理性能更好
                //注意：不能有两个配置处理同一种类型文件
                oneOf:[
                    {
                        test:/\.css$/,
                        use:[...commenCssLoader]
                    },
                    {
                        test:/\.less$/,
                        use:[...commenCssLoader,'less-loader']
                    },
                ]
            }
        ]
    },

5.4 babel缓存

不用重新加载所有的文件，用户第二次进入页面的时候直接读取缓存

  1. 在匹配.js文件的loader中写入配置cacheDirectory
{
    test:/\.js$/,
    exclude:/node_modules/,
    loader:'babel-loader',
    options:{
        presets:[
            [
                '@babel/preset-env',
                {
                    useBuiltIns:'usage',
                    corejs:{version:3},
                    targets:{
                        chrome:'70',
                        firefox:'62',
                        ie:'9',
                        safari:'10',
                        edge:'17',
                    }
                }
            ]
        ],
        //开启babel缓存
        //第二次构建时，会读取之前的缓存
        cacheDirectory:true
    }
},
  1. 给输出的js文件还有css文件设置打包输出名称
output:{
	filename:'js/build.[contenthash:10].js',
	path:resolve(__dirname,'build')
},
 new MiniCssExtractPlugin({
	filename:'css/build.[contenthash:10].css'
}),

配置详情

/**
 * babel缓存
 *   cacheDirectory:true
 * 文件资源缓存
 *   hash:每次webpack构建时会生成一个唯一的hash值。
 *      问题：因为js和css同时使用一个hash值。
 *        如果重新打包，会导致所有缓存失效。(可能只改变了一个文件)
 *   chunkhash：根据chunk生成的hash值。如果打包来源于同一个chunk,那么hash值就一样
 *      问题：js和css的hash值还是一样的。因为css是在js中被引用的，两个同属一个chunk
 *   contenthash: 根据文件的内容生成hash值。不同文件hash值一定不一样
 */

5.5 tree shaking（树摇）

去除无用代码(未使用的代码)

自动开启条件：

  1. 必须使用es6模块化。
  2. 开启mode:production环境。
  3. 在package.json中配置sideEffects
/**
  * tree shaking（树摇）:
  * 去除无用代码(未使用的代码)
  * 自动开启条件：1.必须使用es6模块化。2.开启mode:production环境。
  * 作用:减少代码体积
  * 
  * 在package.json中配置
  * "sideEffects":false 所有代码都没有副作用 （都可以进行tree shaking）
  *   问题：可能会把css/ @babel/polyfill (副作用)文件干掉
  *   解决：
  *     "sideEffects":["*.css"]
  */

六、打包多页应用

// 多入口
let path = require('path')；
let HtmlWebpackPlugin = require('html-webpack-plugin')；

module.exports = {
  mode: 'development',
  entry: {
    home: './src/index.js',
    other: './src/other.js'
  },
  output: {
    filename: "[name].js",
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './index.html',
      filename: 'home.html',
      chunks: ['home']
    }),
    new HtmlWebpackPlugin({
      template: './index.html',
      filename: 'other.html',
      chunks: ['other', 'home']   // other.html 里面有 other.js & home.js
    }),
  ]
}
带脑子的CV工程师
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
webpack vue项目开发环境局域网访问方法
08-27
在Vue项目的根目录下，找到Webpack配置文件，通常是`config/index.js`（这取决于你的项目结构，有的项目可能使用`webpack.config.js`）。在配置文件中，你需要找到并修改`host`和`port`字段。 示例配置： ```...
webpack多页面项目配置
08-10
Webpack 配置多页面项目的目标就是为每个入口文件分别打包对应的资源，以便于管理和优化。 **一、配置多入口** Webpack 配置的核心是`entry`属性。对于多页面应用，我们需要为每个页面定义一个入口。例如，如果项目...
webpack项目配置
qq_42349528的博客
03-09 1083
目录config.jswebpack.common.jswebpack.dev.jswebpack.prod.jswebpack.dll.js config.js const isDevelopment = process.env.NODE_ENV === "development" const isProduction = process.env.NODE_ENV === "production" const SERVER_HOST = "0.0.0.0" const SERVER_PORT = 800
webpack 项目配置
LeeeeeJ的博客
02-18 253
webpack 配置项目 介绍 ​ 一个前端资源加载/打包工具，它将根据模块的依赖关系进行静态分析，将这些模块根据一定的规则生产对应的静态资源。 基本须知 webpack 只能理解javascript和JSON文件 其他类型的文件交给对应的loader处理 环境支持 Node.js环境 全局命令 webpack index.js -o bundle.js LOADER 对象 作用：webpack本身只能处理javascript模块，所以大部分时间需要loader帮助做转换。 有两个属性：test 和
mini-css-extract-plugin 使用教程
最新发布
gitblog_00899的博客
08-09 990
mini-css-extract-plugin 使用教程 mini-css-extract-pluginLightweight CSS extraction plugin项目地址:https://gitcode.com/gh_mirrors/mi/mini-css-extract-plugin 项目介绍 mini-css-extract-plugin 是一个基于 webpack v5 的插件，用...
webpack配置项目—Vue项目
sq-web
07-12 383
分享一个最近测试搭建的webpack的vue项目，完成最基本的功能配置。 一、搭建基本骨架 npm init 初始化 npm install webpack webpack-cli --save-dev 安装基本组件 根目录创建文件：index.html ，src/main.js ，src/app.vue ，webpack.config.base.js，webpack.config.dev.js，webpack.config.prod.js 最终基本目录如下： 二、各文件内容及作用 1、src
【22】手动配置webpack项目
有心博客
10-23 940
手动配置webpack需要的环境有node环境，node环境搭建可以参考如下地址：【Node安装】 第一步，创建自己的项目文件目录，这里我就直接在E:下创建youxin文件夹，然后新建一些必须的文件， |— index.html —–> 【首页】 |— main.js —–> 【webpack入口文件】 |— Demo.vue —> 【编写vue代码一个案例】 |—
项目中webpack配置文件详解(二)
何足道的博客
07-19 816
                                       项目中webpack配置文件详解(二) 这一篇是接着上一篇继续介绍剩余的配置项。 首先是延续上一篇剩余的postcss-loader。 postcss-loader是为了解决浏览器兼容问题，先上个效果图，如下： 比如我们写了box-sizing:border-box，它会帮我们补全为浏览器识别的语法。解决兼容...
webpack配置文件和常用配置项介绍
08-30
Webpack 配置文件是指在项目根目录下创建的 `webpack.config.js` 文件，该文件定义了 webpack 的配置信息。一个项目可以设置多个配置文件，每个配置文件可以有不同的功能。 配置文件格式 Webpack 配置文件的格式...
webpack-config-reload:热加载 webpack 配置。修改 webpack 相关配置文件后，自动重启脚本命令，比如 dev-server
05-05
修改 webpack 相关配置文件后，自动重启脚本命令，比如 dev-server，比较方便的是在调试 webpack 繁琐的配置时候，省去一遍遍地 Ctrl+c 和重复输入命令。 注意：只支持 webpack/webpack-dev-server 两个命令。 安装...
webpack：从入门到真实项目配置（二）
心暖未晴
09-19 1824
如何在项目中使用 webpack 项目中已经配置了很简单的 babel 和 webpack，直接运行 npm run start 即可 这时候你会发现这个 bundle.js 居然有这么大，这肯定是不能接受的，所以接下来章节的主要目的就是将单个文件拆分 为多个文件，优化项目。 分离代码 先让我们考虑下缓存机制。对于代码中依赖的库很少会去主动升级版本，但是我们自己的代码却每
webpack基础配置
qq_46365810的博客
10-17 293
生产模式是开发完成代码后，我们需要得到代码将来部署上线。这个模式下我们主要对代码进行优化，让其运行性能更好。文件目录├── webpack-test (项目根目录)├── config (Webpack配置文件目录)│ ├── webpack.dev.js(开发模式配置文件)│ └── webpack.prod.js(生产模式配置文件)├── node_modules (下载包存放目录)├── src (项目源码目录，除了html其他都在src里面)│ └── 略。
使用webpack进行最简单的项目构建
qwerty053的博客
11-26 873
这些应该是对在官网初学习的一个小总结吧~，大家可以去官网看较为详细的解释： 指南 | webpack 中文网 (webpackjs.com) 那我们话不多说，直接开始： 首先在nodeJs下创建一个webpack-demo文件夹，在其中调用命令行执行： npm init -y npm install webpack webpack-cli --save-dev 修改生成的package.json：删去package.json中的"main":"index.js"，添加"private":true，得
前端项目-webpack-安装和基本配置
gaogzhen的博客
07-30 344
前端项目-webpack-安装和基本配置- 目录 文章目录0、前言1、概述2、webpack的基本使用2.1、创建列表隔行变色项目3、项目中安装和配置webpack4、重新导入js***后记*** ： 内容 0、前言 当前web开发面临的困境 文件关系依赖错综复杂 静态资源请取消率低 模块化支持不友好 浏览器对高级javascript特性兼容程度低 etc… 1、概述 webpack是一个流行的前端项目构建工具（打包工具），可以解决web开发中所面临的困境。 webpack提供了友好的模块化支
webpack配置使用步骤
web工程师——小发发
03-10 205
一、初始化一个项目 1、创建项目也可以（手动创建一个文件夹），执行npm init -y，让项目进行初始化，并生成package.json文件。 注意：项目名不能有汉字，不能取名为webpack 2、安装webpack：npm i webpack webpack-cli -D webpack：代表webpack工具的核心包 webpack-cli:提供了一些在终端中使用的命令 -D(--svae-dev):表示项目开发期间的依赖，也就是：线上代码中用不到这些包了。（developers）
Webpack配置全解析（基础篇）
2401_83916283的博客
03-29 1143
前端面试题汇总前端面试题是我面试过程中遇到的面试题，每一次面试后我都会复盘总结。
webpack入门和实战(一)--webpack配置及技巧
热门推荐
solar_Lan的博客
09-18 5万+
一、全面理解webpack 1、什么是 webpack？        webpack是近期最火的一款模块加载器兼打包工具，它能把各种资源，例如JS（含JSX）、coffee、样式（含less/sass）、图片等都作为模块来使用和处理,它能有Grunt或Gulp所有基本功能。webpack的官网是 https://webpack.github.io/ ，文档地址是https://webpack...
vue安装使用
weixin_68193389的博客
11-01 253
手动新建一个node文件夹双击运行node安装。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值