您的位置：首页 > Web前端 > Webpack

webpack入门测试

2017-04-25 00:00 351 查看
摘要: 在网上找了，很多资料，也有视频，本来跟着视频一步步来，但是总是出现错，最后试了很多次，才成功。

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-loader
和
style-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
相关文章推荐
新的分享
章节导航