webpack环境配置2
1.webpack安装
Step 1: 首先安装Node.js, 在1中已经详细介绍了.
Step2: 在Git或者cmd中输入下面这段代码, 通过全局先将webpack指令安装进电脑中
npm install webpack -g
Step3: 使用Git Bash here 或者 cmd cd命令使当前目录转到当前项目的目录下, 然后输入下面这段命令
npm init
接下来会弹出一些信息, 就是一些项目名和一些参数的描述, 可以全部按回车使用默认信息, 完成之后项目文件夹下会生成一个package.json的文件.
这样webpack就安装完成了.
2.webpack配置
Step1: 创建项目文件夹, 名字自起, 但路径名不要包含中文, 以及项目名也不要叫”webpack”, 并且不要包含大写字母.
这是我的项目,我的就放在这里面了.
Step2: 接下来创建并编写配置文件. 首先我们先介绍几个配置文件的参数.
- entry: 是 页面入口文件配置 (html文件引入唯一的js 文件)
- output:对应输出项配置
- path :入口文件最终要输出到哪里,
- filename:输出文件的名称
- publicPath:公共资源路径
Step3: 在你的项目目录下创建webpack.config.js配置文件, 通过这个文件进行webpack的配置, 并且还要创建一些路径保存基本文件. 例如:
src文件夹
Step4: 在src的js下创建一个入口文件, 我创建的叫做entry.js, 在项目目录再创建一个index.html用来调试使用. 编写webpack.config.js文件,
//webpack.config.js
module.exports = {
entry : './src/js/entry.js',//入口文件
output : {//输出文件
filename : 'index.js',//输出文件名
path : __dirname + "/out"//输出文件路径
}
}
我们随便在index.html和入口文件entry.js写点什么看看是否成功配置,
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>yk</title>
</head>
<body>
111
<script src="./out/index.js"></script><!-- 在这里引入的是打包完成的js文件 -->
</body>
</html>
//entry.js
console.log("yk");
之后使用Git Bash here 或者 cmd cd命令使目录为当前项目目录, 输入webpack或者webpack -w命令, 查看index.html是否成功console出yk;
(webpack 和 webpack -w 区别
webpack -w可以对项目打包并且实时监控, 当前配置文件下的文件如果发生更改时重新打包, 但如果webpack的配置文件即webpack.config.js更改时还是要通过webpack进行打包.(退出webpack -w 操作 ctrl+c))
webpack loader加载器
接下来我们继续配置loader, 通过加载器处理文件:比如 sass less 等, 告知 webpack 每一种文件都需要使用什么加载器来处理。
npm install babel-loader babel babel-core css-loader style-loader url-loader file-loader less-loader less --save-dev
下载完成后, 我们修改webpack.config.js文件, 将加载器引入.
module.exports = { entry : './src/js/entry.js', output : { filename : 'index.js', path : __dirname + '/out' }, module : { rules: [ {test: /.js$/, use: ['babel-loader']}, {test: /.css$/, use: ['style-loader', 'css-loader']},/*解析css, 并把css添加到html的style标签里*/ //{test: /.css$/, use: ExtractTextPlugin.extract({fallback: 'style-loader',use: 'css-loader'})},/*解析css, 并把css变成文件通过link标签引入*/ {test: /.(jpg|png|gif|svg)$/, use: ['url-loader?limit=8192&name=./[name].[ext]']},/*解析图片*/ {test: /.less$/, use: ['style-loader', 'css-loader', 'less-loader']}/*解析less, 把less解析成浏览器可以识别的css语言*/ ] }, }
Step3: 接下来我们先测试css, 我们在项目文件夹下的src文件夹下创建index.css. 随便写一点属性.
/*index.css*/
.block-top{
width: 100px;
height: 100px;
background: red;
}
.block-bottom{
width: 200px;
height: 200px;
background: orange;
}
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>yk</title>
</head>
<body>
111
<div class="block-top"></div>
<div class="block-bottom"></div>
<script src="./out/index.js"></script><!-- 在这里引入的是打包完成的js文件 -->
</body>
</html>
因为在webpack中所有文件都是模块, 所以必须要将css引入. 在刚刚的entry.js中添加如下代码.
//entry.js
require('../css/index.css');//引入css文件
console.log("1234");
Step4: 当有多个js文件时, 如何进行引入呢? 接下来我们做一个简单小功能来说明这个问题, 让我们点击方块的时候, 方块变大.
接下来在src的js文件夹下创建一个基本的工具tool.js (很多小的问题都被我扩大化了, 只是为了说明问题不一定适用)
//tool.js var tool = {//获取DOM元素 getDom: function(className) { return document.getElementsByClassName(className)[0]; } } module.exports = tool;//模块出口
src的js下创建一个demo1.js文件, demo2.js同理
var obj = require('./tool.js'); var demo1 = { init: function() { this.bindEvent(); }, bindEvent: function() { //var demo1 = document.getElementsByClassName('demo1')[0]; var demo1 = obj.getDom('demo1'); demo1.onclick = this.changeStyle; }, changeStyle: function() { this.style.width = '200px'; this.style.height = '200px'; this.style.background = 'green'; console.log('1'); } } module.exports = demo1;
修改入口文件entry.js
require('../css/index.css'); var demo1 = require('../js/demo1.js'); var demo2 = require('../js/demo2.js'); demo1.init(); demo2.init();
webpack一下, 看看效果
关于图片的打包
- Step1: 在img文件夹下随便找一个小一点的图片放进去.
Step2: 修改entry.js
- require('../css/index.css'); var demo1 = require('../js/demo1.js'); var demo2 = require('../js/demo2.js'); demo1.init(); demo2.init(); var oImg = new Image(); oImg.src = require('../img/1.gif');//当成模块引入图片 document.body.appendChild(oImg);
由于我们引入的是静态资源, 在webpack.config.js中修改一下
module.exports = { entry : './src/js/entry.js', output : { filename : 'index.js', publicPath: __dirname + '/out',//添加静态资源, 否则会出现路径错误 path : __dirname + '/out' }, module : { rules: [ {test: /.js$/, use: ['babel-loader']}, {test: /.css$/, use: ['style-loader', 'css-loader']},/*解析css, 并把css添加到html的style标签里*/ //{test: /.css$/, use: ExtractTextPlugin.extract({fallback: 'style-loader',use: 'css-loader'})},/*解析css, 并把css变成文件通过link标签引入*/ {test: /.(jpg|png|gif|svg)$/, use: ['url-loader?limit=8192&name=./[name].[ext]']},/*解析图片*/ {test: /.less$/, use: ['style-loader', 'css-loader', 'less-loader']}/*解析less, 把less解析成浏览器可以识别的css语言*/ ] }, }
大家自己webpack看看效果
webpack进阶设定
我们在项目中有多个html文件时怎么处理呢?, 接下来我们重新设定配置文件, webpack.config.js
module.exports = { entry : {index1: './src/js/entry.js', index2: './src/js/entry2.js'}, output : { filename : '[name].js',//这样就可以生成两个js文件, 名字分别为index1.js, 和index2.js publicPath: __dirname + '/out',//添加静态资源, 否则会出现路径错误 path : __dirname + '/out' }, module : { rules: [ {test: /.js$/, use: ['babel-loader']}, {test: /.css$/, use: ['style-loader', 'css-loader']},/*解析css, 并把css添加到html的style标签里*/ //{test: /.css$/, use: ExtractTextPlugin.extract({fallback: 'style-loader',use: 'css-loader'})},/*解析css, 并把css变成文件通过link标签引入*/ {test: /.(jpg|png|gif|svg)$/, use: ['url-loader?limit=8192&name=./[name].[ext]']},/*解析图片*/ {test: /.less$/, use: ['style-loader', 'css-loader', 'less-loader']}/*解析less, 把less解析成浏览器可以识别的css语言*/ ] }, }
webpack插件使用
首先我们由于要使用webpack插件, 因此我们要重新下载一下webpack包, 将目录定位到当前项目目录, 输入npm install webpack
之后我们修改webpack.config.js, 将下面代码放到配置文件开头. 这样就可以使用插件了
var webpack = require('webpack');
将插件信息写到配置文件里
var webpack = require('webpack'); var uglifyPlugin = new webpack.optimize.UglifyJsPlugin({minimize: true});//代码压缩 var CommonsChunkPlugin = new webpack.optimize.CommonsChunkPlugin('common');//把公共模块提取出来, 并取名为'common'(名字自起), webpack之后再out文件夹下生成common.js, 测试时记得引入提取出来的公共模块js文件 var ExtractTextPlugin = require("extract-text-webpack-plugin");//将css独立引入变成link标签形式, 使用该插件需要独立下载'npm install extract-text-webpack-plugin --save-dev', 同时下面的rules也必须更改 var providePlugin = new webpack.ProvidePlugin({$: 'jquery', jQuery: 'jquery', 'window.jQuery': 'jquery'});//引入jquery module.exports = { entry : {index: './src/js/entry.js', index2: './src/js/entry2.js'}, output : { filename : '[name].js', publicPath: __dirname + '/out', path : __dirname + '/out' }, module : { rules: [ {test: /.js$/, use: ['babel-loader']}, //{test: /.css$/, use: ['style-loader', 'css-loader']}, {test: /.css$/, use: ExtractTextPlugin.extract({fallback: 'style-loader',use: 'css-loader'})}, {test: /.(jpg|png|gif|svg)$/, use: ['url-loader?limit=8192&name=./[name].[ext]']}, {test: /.less$/, use: ['style-loader', 'css-loader', 'less-loader']} ] }, plugins: [uglifyPlugin, CommonsChunkPlugin, new ExtractTextPlugin('[name].css'),providePlugin]//插件集合 }
webpack服务器
首先先定位目录输入命令 npm install webpack-dev-server -g
, 修改webpack.config.js文件
publicPath: 'http://localhost:8080/out',
html文件所引用的目录也要更改:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>text</title> <link rel="stylesheet" href="http://localhost:8080/out/index.css"> </head> <body> <a href="http://localhost:8080/index2.html">11</a> <div class="demo1"></div> <div class="demo2"></div> <script src="http://localhost:8080/out/common.js"></script> <script src="http://localhost:8080/out/index.js"></script> </body> </html>
webpack-dev-server一下看看效果
小工具: webpace-dev-server –devtool eval-source-map –progess –colors打包时输入这一行可以直接找到文件如果出错时的位置
小知识点: 上面这一句话如果觉得太长可以将
"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "xuan": "webpack-dev-server --devtool eval-source-map --progress --colors" },
这一段代码放到项目目录下的package.json里, 这样调试时如果输入npm run xuan就等于输入那一长串代码
备注;服务器启动时会报错,4.1.0的升级后插件会报错,改一下webpack.config.js的配置,把报错的删掉,即可启动.
//webpack.config.js
var webpack = require('webpack');
module.exports = {
entry : {index: './src/js/entry.js', index2: './src/js/entry2.js'},
output : {
filename : '[name].js',
publicPath:'http://localhost:8080/out',
path : __dirname + '/out'
},
module : {
rules: [
{test: /.js$/, use: ['babel-loader']},
//{test: /.css$/, use: ['style-loader', 'css-loader']},
// {test: /.css$/, use: ExtractTextPlugin.extract({fallback: 'style-loader',use: 'css-loader'})},
{test: /.(jpg|png|gif|svg)$/, use: ['url-loader?limit=8192&name=./[name].[ext]']},
{test: /.less$/, use: ['style-loader', 'css-loader', 'less-loader']}
]
},
}
总之,你已经启动了..
转载于:https://www.cnblogs.com/bbqq1314/p/8523702.html
webpack环境配置2相关推荐
- 从零搭建个人博客(1)-webpack环境配置
本文作为搭建个人博客的开端,将会配置环境,以后做别的project也可以以此开始.代码托管在github. code: https://github.com/MSChuan/Blog-UI, demo ...
- 从零搭建个人博客(3)-如何在webpack环境下配置jquery和富文本编辑器Simditor
无论是博主自己写文章还是读者发表评论,都需要一个方便的编辑框,html自带的textarea和editable div都过于简单,本文将记录在webpack环境中添加jquery和Simditor的过 ...
- React + Typescript + Webpack 开发环境配置
对于复杂或多人开发的 React 项目来说,管理和使用每个组件的 props . state 或许会成为一件让人头痛的事情,而为每一个组件写文档,成本也会比较大,对项目的开发效率也不是最理想的. Ty ...
- React系列---Webpack环境搭建(二)不同环境不同配置
React系列---Webpack环境搭建(一)手动搭建 React系列---Webpack环境搭建(二)不同环境不同配置 React系列---Webpack环境搭建(三)打包性能优化 实际项目中,往 ...
- 教你webpack、react和node.js环境配置(上篇)
很多人刚学习react的时候,往往因为繁琐的配置而头疼,这里我将手把手教大家怎么用webpack配置react和redux的环境,这篇教程包括前端react和后台node整个网站的环境配置,对node ...
- React多页面应用5(webpack生产环境配置,包括压缩js代码,图片转码等)
本教程总共7篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章! 1.React多页面应用1(webpack开发环境搭建,包括Babel.热更新等) ----2017 ...
- Vue——10 - webpack打包保姆级教程01——打包js、json、css、less、html、背景图片以及图片、字体(Font)文件,devsever,生产环境配置以及css的兼容写法
目录 一.webpack打包JS文件 1.新建入口文件index.js和mathUtils.js,index.js是依赖于mathUtils.js 2.然后使用webpack命令打包js文件 二.打包 ...
- Vue单文件组件环境配置
单文件组件不能直接运行使用,需要依赖node项目对其进行解析打包,在使用之前需要先进行环境配置 安装node版本管理工具nvm curl -o- https://raw.githubuserconte ...
- vue如何配置服务器端跨域_vue开发环境配置跨域,一步到位
本文要实现的是:使用vue-cli搭建的项目在开发时配置跨域,上线后不做任何任何修改,接口也可以访问 阅读时间需要三分钟 production:产品 生产环境 development:开发 开发环境 ...
最新文章
- Python访问街区10个点,并俩俩绘制一条线,得到5条线,求最短的距离和?
- 文件上传(JavaWeb 狂神笔记)
- Yii “CDbConnection failed to open the DB connection: could not find driver解决办法
- 光伏产业链遭致命伤:补贴下调或结束暴利
- flannel源码分析--RegisterNetwork
- ExtJS学习笔记3:载入、提交和验证表单
- 防外挂和防木马的通用解决方案
- 提问征集:对话VLC首席开发者Jean-Baptiste Kempf
- CentOS 7.2.1511 x64下载地址
- GDAL交流 QQ群
- System.load 和 System.loadLibrary详解
- WCF中NetTCp配置
- 红米3 MoKee 7.1.2_r36 自编译版/去魔趣中心、宙斯盾/息屏禁止刷新UI 2018年5月5日更新...
- tab按钮样式 vue_vant 解决tab切换插件标题样式自定义的问题
- 多年珍藏的Android开发必备网站和工具
- “WebProxyWrapper”的对象强制转换为类型“System.Net.WebProxy
- python怎么用圆周率_用python程序求圆周率到任意位
- 深入了解String和intern
- 什么服务器适合搭建APP
- iOS iphone5屏幕适配 autosizing