时间戳

首页 > 技术文章 > webpack的使用

webpack的使用

ziyandeyanhuo 2018-10-19 16:00 原文

网址：https://www.webpackjs.com/guides/getting-started/

参考网址：https://www.jianshu.com/p/6712e4e4b8fe

 npm cache clean --force'清缓存再安装

1、首先下载node.js安装node.js；

尽量使用淘宝镜像进行安装，防止出现安装失败

2、使用npm install -g webpack；对webpack进行全局安装；

3、新建项目目录；

4、使用npm init -y生成package.json配置文件；

5、生成项目目录下的webpack：npm install --save-dev webpack 和安装 webpack-cli: npm install --save-dev webpack-cli 和 npm install webpack-dev-server --save-dev

webpack4打包使用时：webpack  默认打包src--->index.js生成后再dist----->main.js

打包是会有这种警告提示：

这是因为mode有两种打包环境：1、development开发环境;2、production生产环境；

打包是输入：webpack --mode=development或者webpack --mode=production就不会有警告了

创建webpack.config.js文件

 1 const path= require('path')
 2 module.exports = {
 3     mode:'development',
 4     //入口
 5     entry:{
 6       main:'./src/index.js'  
 7     } ,
 8     //出口
 9     output:{
10       path:path.resolve(__dirname,'../dist'),
11       filename: 'bundle.js'
12     },
13     //模块:css图片
14     module:{},
15     // 插件
16     plugins:[],
17     //配置webpack开发服务功能
18     devServer:{}
19 }

package.json中

“scripts”:{

　　"build":"webpack --config webpack.config.js"

}

使用配置进行打包：npm run build

安装css： 

新建一个src/css/index.css

index.js中把css引入

import css from './css/index.css'

打包css需要下载配置css的loader: npm install style-loader css-loader --save-dev

在webpack.config.js中配置

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

 

 

 

 

 

如果不使用默认的，使用webpack.config

##安装(推荐局部安装)
npm install webpack -g      //-g 代表全局安装
npm install webpack -s      //-s 代表局部安装

#安装 
npm install --save-dev webpack  -s

#安装 webpack-cli
npm install --save-dev webpack-cli -s //局部安装 （webpack 4.0必须安装）

#创建backage.json文件
npm init -y

#安装 style-loader css-loader
npm i style-loader css-loader -s
#安装less的loader
npm install --save-dev less less-loader -s
#安装file-loader加载图片
npm install --save-dev file-loader -s
#安装url-laoder 加载字体
npm install --save-dev url-loader -s
#安装csv-loader xml-loader 加载数据（CSV、TSV 和 XML）
npm install --save-dev csv-loader xml-loader -s

#检查版本是否安装成功
webpack -v

##删除
#全局卸载
npm uninstall webpack -g

#局部卸载
npm uninstall webpack -s

 

推荐阅读