初学webpack

--这篇学习笔记,是根据简书zhangwang的的文章来进行学习的

依照惯例,webpack是模块打包工具。我的理解就是wbepack会分析你项目的结构,然后把那些浏览器可能没办法直接运行的(sass、es6(某E))转换成浏览器可以直接运行的格式。

首先是第一步安装:

yarn global add webpack//使用yarn来安装
npm install webpack -g//使用npm来安装

公司的电脑装webpack的时候,装了全局的webpack但是使用的时候 还是会显示webpack不是内部或外部命令,也不是可运行的程序或批处理文件。

解决方法是,配置系统变量,手动把webpack的路径放在系统变量path里面就解决了

(用的是yarn.因为npm安装都是能出一堆的错,换了淘宝源还是没用,果断,先放弃!)C:\AppData\Local\Yarn\config\global\node_modules\.bin (路径是这个)

接着就是开始使用webpack了,在使用之前的准备

第一步新建一个文件夹,然后在下面的Terminal输入

yarn init//使用yarn进行初始化
npm init//使用npm进行初始化

因为只是学习,所以要输入的东西我都是一路空格下来,这时候在新建好的文件夹下就会出现一个pack.json的文件夹(这个目录是我之前学react的时候建的...请无视这个目录名的意思)

{
  "name": "react-app",//目录名
  "version": "1.0.0",//版本号
  "main": "index.js",//程序主入口模块的ID,如果别的用户需要你的包,当用户调用的时候,返回的就是这个模块的导出
  "license": "MIT"//MIT许可证
}

然后在新建的文件夹里,新建文件,react-app文件夹下的目录结构如下

然后往我们的项目中加入webpack的依赖包

yarn add webpack//yarn的方式
npm install --save-dev webpack//npm的方式

 npm的命令里面--save-dev是在pack.json文件中添加模块和版本号,所以json文件就变成了这样

{
  "name": "react-app",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "devDependencies": {
    "webpack": "^3.10.0"
  }
}

devDependencies是当前包所依赖的其他包,这里就是依赖了webpack的3.10.0的版本

然后在index.html中写下代码:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id='root'></div>
<script src="bundle.js"></script>
</body>
</html>

bundle.js是一会我们webpack打包后会生成的js文件。为什么会取这个名字捏,这跟后面的配置文件有关系

接着我们来写test.js和main.js里面的内容

//test.js
module.exports = function() { var test = document.createElement('div'); test.textContent = "Hello I am test!"; return test; };

//main.js
const test = require('./test.js'); document.querySelector("#root").appendChild(test());

接着就要开始打包了

首先我们先要配置一个webpack的配置文件,取名为webpack.config.js

module.exports = {
  entry:  __dirname + "/app/main.js",//入口文件
  output: {
    path: __dirname + "/public",//打包后的文件存放的地方
    filename: "bundle.js"//打包后输出文件的文件名
  }
}

看到没有!bundle.js就是在这里配置的。

配置完文件以后,只需要在控制台输入命令 webpack就好了(此处我的webpack安装的是全局的,所以只需要输入webpack),之后就打包成功了。打开你的bundle.js就能看到代码,用浏览器打开你的index.html,就可以看见Hello I am test!了

 除了通过在终端输入webpack打包,还可以通过配置pack.json文件来进行打包

{
  "name": "react-app",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "dependencies": {
    "webpack": "^3.10.0"
  },
  "scripts":{
    "start":"webpack"
  }
}  

 这时候我们在控制台输入

yarn start  

 就会开始进行打包了。

下一个知识点就是 使用webpack来构建本地服务器(基于node.js)

这里首先要先安装一个项目依赖webpack-dev-server 

yarn add webpack-dev-server

 我们可以从pack.json中看到webpack-dev-server的版本号

"dependencies": {
    "webpack": "^3.10.0",
    "webpack-dev-server": "^2.11.1"
  }

webpack-dev-server的配置也要在webpack.config.js里面进行,

其中主要的配置选项有

contentBase:配置要为哪个文件建立本地服务器

port:配置监听端口,默认为8080

inline:true(配置当源文件改变的时候,浏览器会自动刷新)

historyApiFallBack:true(所有跳转指向index.html)这一个配置我还不理解。后面理解了会进行补充

接着我们就来配置刚刚那个项目的本地服务器

devServer:{
contentBase:"./public",
inline:true,
historyApiFallback:true,
port:"3000"
}

然后在pack.json中进行配置,用于开启本地服务区

"scripts": {
    "start": "webpack",
    "server": "webpack-dev-server --open"
  }  

最后在控制台输入命令

yarn run server  

打包编译完成之后,就可以在http://localhost:3000/看到打包好的效果啦,然后去改动js的话,可以看到页面会自动刷新!

接着就是Loader,我觉得loader就是调用外部方法的时候使用的。他的配置选项有:

test:所需要处理的文件的拓展名的正则表达式(= =突然发现自己还需要努力的看一看正则!猝)

loader:loader的名称(比如babel-loader(e6=>es5))

include:手动添加上必须处理的文件

exclude:屏蔽不需要处理的文件

query:为loaders提供额外的设置选项

模块的配置具体代码如下

module: {
        rules: [
            {
                test: /\.js$/,
                use: {
                    loader: "babel-loader",
                    options: {
                        presets: [
                            "env"
                        ]
                    }
                },
                exclude: /node_modules/
            }
        ]
    }  

 

posted @ 2018-01-25 15:01  SunnyAmor  阅读(136)  评论(0编辑  收藏  举报