webpack入门测试
博客专区 > wshining 的博客 > 博客详情
webpack入门测试
wshining 发表于9个月前
webpack入门测试
  • 发表于 9个月前
  • 阅读 22
  • 收藏 0
  • 点赞 0
  • 评论 0

标题:腾讯云 新注册用户域名抢购1元起>>>   

摘要: 在网上找了,很多资料,也有视频,本来跟着视频一步步来,但是总是出现错,最后试了很多次,才成功。

webpack是什么?

Webpack 是一个模块打包器。它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源。

基本命令

      webpack         // 最基本的启动webpack的方法
	  webpack -w      // 提供watch方法;实时进行打包更新
	  webpack -p      // 对打包后的文件进行压缩
	  webpack -d      // 提供source map,方便调式代码

第一步安装nodeJS

在安装 Webpack 前,本地环境需要支持 node.js,下载nodeJS 安装包按照步骤,直接安装,安装的位置自定义;

安装好后运行命令行path

nodeJS中包含npm ,因此npm也会安装好可以利用node -v和 npm -v查看是否安装

如上显示则表示已将安装好,在C:\Users\Administrator\AppData\Roaming\npm目录下有如下文件,

注意:使用npm时可能初始该命令不是内部或外部命令问题,这有可能是npm配置文件出错了,

解决方法一:C:\Users\husha_000\AppData\Roaming\npm文件路径添加进环境变量中,重启命令行;

解决方法二:将npm文件删除,重新安装nodejs,简单暴力。

第二步安装全局的webpack

在命令行下执行

npm install webpack -g

这样我们才可以正确的使用webpack这个命令,

然后, 你还可以在当前项目里面也安装一个webpack, 这也是官方推荐的做法,

在命令中进入自己的项目,确定项目中有package.json文件,没有就用npm init 创建,

    npm init

在当前项目中也安装一个webpack,安装比较慢,要耐心等待

npm install webpack --save-dev

这样就可以在你的webpack.config.js里面方便的引用webpack

项目结构如下

其中app.js 是通webpack打包出来的文件,

index.html代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script src="./app.js"></script>
</body>
</html>

main.js文件如下:

require("./main.css");
require('./mymodule.js')();

mymodule.js文件如下:

module.exports = function() {
    document.write('hello webpack');
};

webpack.config.js文件如下:

var webpack = require('webpack');

module.exports = {
    entry: './main.js',
    output: {
    	 path: __dirname,
        filename: 'app.js'
    },
    
};

执行webpack

第三步使用loader

很多模块打包工具只是针对js文件,而webpack的强大之处在于将模块的概念进行了扩展,认为一切静态文件都是模块,包括css、html模板、字体、CoffeeScript等等。虽然webpack本身依然是只能够处理js文件,但是通过一系列的loader,就可以处理其它文件了。

下面以css-loaderstyle-loader为例,演示如何打包样式文件。首先执行如下命令安装依赖模块:

    安装css-loader:  
	# npm install css-loader  --save-dev
	安装style-loader  
	# npm install style-loader  --save-dev

main.css文件如下:

body{
	background: #f00;
}

修改main.js文件:

require("./main.css");
require('./mymodule.js')();

修改webpack.config.js文件:

var webpack = require('webpack');

module.exports = {
    entry: './main.js',
    output: {
    	 path: __dirname,
        filename: 'app.js'
    },
    module:{
    	loaders:[{
			test: /\.css$/,
			loader: 'style-loader!css-loader'
    	}],
    },
    
};

执行webpack

 

注意:此处的

只能用loader: 'style-loader!css-loader',不能用 loaders: ['style', 'css', 'autoprefixer',要不然就会报错。

 

 

 

标签: Webpack
共有 人打赏支持
粉丝 13
博文 59
码字总数 39939
×
wshining
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: