Webpack |
您所在的位置:网站首页 › webpack安装使用 › Webpack |
webpack 可以将多种静态资源(js,css,png,less,sass等)转为一个静态文件,减少了页面的请求 在安装 Webpack 前,你本地环境需要支持 node.js。 1.创建文件目录:myproject, 在myproject里面创建 build src public 三个文件 (build里面是打包后的文件; src是自己创建的源文件;public是调式 文件) 2.先安装node.js (http://nodejs.cn/ ) 安装完后 就自动有了npm 3.安装cnpm ( https://npm.taobao.org/ ): sudo npm install -g cnpm --registry=https://registry.npm.taobao.org 4. 安装webpack sudo cnpm install webpack -g (全局安装,一般都是要全局安装的 因为可能有很多地方需要用到) 5.安装webpack-cli sudo cnpm install webpack-cli -g (在webpack 3中,webpack本身和它的CLI以前都是在同一个包中,但在第4版中,他们已经将两者分开来更好地管理它们。) 6.终端输入: 先把文件拖进来 cd+ url ; 然后输入 webpack 会在build里面产生一个bundle.js文件 7.安装package.js: 进入文件夹目录 然后sudo cnpm init (一直按回车就行 成功后文件夹会出现一个package.json文件) package.json 这是一个标准的npm说明文件,里面蕴含了丰富的信息,包括当前项目的依赖模块,自定义的脚本任务等等 8.创建本地服务器 sudo cnpm install --save-dev webpack-dev-server -g 配置webpack.config.js文件 见下图: 9.在json文件里面 配置 "build":"webpack", "start" : "webpack-dev-server --open" 10. 在public 文件里面创建一个index.html文件 里面引入 11.在终端输入:npm start 就可以弹出调试页面 12.引入css文件:(webpack只能识别js) 安装依赖 sudo cnpm install style-loader css-loader --save congfig.js: 文件配置: 在main.js文件中引入css文件: require("./mycss.css"); 创建文件目录:myproject, 在myproject里面创建 build src public 三个文件 (build里面是打包后的文件; src是自己创建的源文件;public是调式 文件) |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |