webpack 环境搭建

Webpack环境搭建

一、安装node

1、node官网下载node并安装----node里面内置了npm所以用在安装npm

2、命令行输入node -v查看node是否安装成功

二、全局安装webpack

1、命令行运行: npm install webpack -g   

2、目的:全局使用webpack 命令

三、搭建项目

1、在项目根目录项安装npm install webpack --save-dev安装到项目依赖中

2、运行npm init -y 初始化项目

3、搭建项目目录,根目录创建src文件夹和dist文件夹,src里面放打包前的文件{imagesjscssindex.htmlmian.js}dist中放打包后的文件。

4、根目录下创建webpack.config.js文件,用于打包配置:

-----------------------------------------------------------------------------------------------------------------

const path=require('path');//引进path模块

var htmlwebpackPlugin=require('html-webpack-plugin');//引进配置插件

module.exports={

mode:"development",//取消打包下黄色字体

entry:'./src/main.js',//项目入口

output:{//项目出口

path:path.resolve(__dirname,"dist"),//打包后文件路径

filename:"bundle.js"//打包后文件名称

},

 

//运行cnpm i html-webpack-plugin --save-dev安装到开发依赖

plugins:[ //插件

new htmlwebpackPlugin({

template:path.resolve(__dirname,'src/index.html'),//模板index.html路径

filename:'index.html'//打包后名称

})

],

 

//运行cnpm i style-loader css-loader --save-dev安装到开发依赖

module:{ //打包css文件

rules:[

{

test:/\.css$/,//文件为css

use:[//配置loader

"style-loader",

"css-loader"

]

}

]

},

}

5、执行webpack命令打包

四、实现webpack实时打包构建

1由于每次重新修改代码之后,都需要手动运行webpack打包的命令,比较麻烦,所以使用webpack-dev-server来实现代码实时打包编译,当修改代码之后,会自动进行打包构建。

2运行cnpm i webpack-dev-server --save-dev安装到开发依赖

3、如果只有本地安装了webpack-dev-server ,打包时运行webpack-dev-server  会报错“不是内部会外部命令”。两种方法:

(1) 全局安装运行npm install webpack-dev-server -g ,能够使用在全局命 令行运行webpack-dev-server

(2) package.json文件中的指令,来进行运行webpack-dev-server命令,在 scripts节点下新增"dev": "webpack-dev-server"指令,在命令行执行npm run dev

4、在打的包后发现没有生成打包文件,实际上打包文件是存放在内存的,根据提示输入Y,开启本地服务,在http://localhost:8080/ 中可以看到打包index执行后的效果。

五、安装插件

1、使用--contentBase指令的过程比较繁琐,需要指定启动的目录,同时还需要修改index.html中script标签的src属性,所以推荐用html-webpack-plugin插件配置启动页面.

2、运行cnpm i html-webpack-plugin --save-dev安装到开发依赖

3、webpack.config.js配置文件如下实例代码。

 

 

 

六、使用webpack打包css文件

1、运行cnpm i style-loader css-loader --save-dev

2、修改webpack.config.js这个配置文件:

 

 

 

详情使用webpack打包lesssass等类似请查看官网。https://www.webpackjs.com/

posted @ 2019-12-18 18:24  JS-Feng  阅读(607)  评论(0编辑  收藏  举报