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

webpack 环境搭建+实现热更新

2017-09-28 14:09 309 查看
让我们一起构建一个小的app
为了便于你更好的了解Webpack带来的好处，我们将会构建一个非常小的app并将资源文件打包。在这个教程中我推荐基于Node4或Node5和NPM3来进行开发，这样就避免在使用Webpack工作的过程中出现一系列头疼的问题。如果你使用的不是NPM3,你可以通过 npm install npm@3 -g 命令来安装它。
$ node --version
v5.7.1
$ npm --version
3.6.0
基础的引导
让我们开始创建我们的项目并安装Webpack，我们也会拉取jQuery稍后做展示用。
$ npm init -y
$ npm install jquery --save
$ npm install webpack --save-dev
现在让我们创建app的入口文件，用ES5的语法：
src/index.js
var $ = require('jquery');
$('body').html('Hello');
然后在webpac.config.js文件中创建Webpack配置。Webpack配置就是Javascript，需要导入一个对象。
module.exports = {
entry: './src',
output: {
path: 'builds',
filename: 'bundle.js',
},
};
entry 告诉Webpack在你的应用中哪些文件是入口文件。这些就是最主要的文件，位于依赖树的最上层。然后我们告诉它编译的打包文件放到builds文件夹下并且命名为bundle.js。让我们来设置相应的index.html页面：
<!DOCTYPE html>
<html>
<head></head>
<body>
<h1>My title</h1>
<a>Click me</a>
<script src="builds/bundle.js"></script>
</body>
</html>
我们来运行Webpack命令，我们得到了一些信息，它告诉我们bundle.js编译正确：
$ webpack
Hash: d41fc61f5b9d72c13744
Version: webpack 1.12.14
Time: 301ms
Asset    Size  Chunks             Chunk Names
bundle.js  268 kB       0  [emitted]  main
[0] ./src/index.js 53 bytes {0} [built]
+ 1 hidden modules
这里你可以看到Webpack告诉你bundle.js包含了你的入口文件(index.js)以及有一个隐藏模块。这个隐藏模块就是jQuery,Webpack默认隐藏不是你的模块。为了查看所有被Webpack编译之后隐藏的模块，我们可以加上 --display-modules标记：
$ webpack --display-modules
bundle.js  268 kB       0  [emitted]  main
[0] ./src/index.js 53 bytes {0} [built]
[1] ./~/jquery/dist/jquery.js 259 kB {0} [built]
热更新---------------->这里我走了很多弯路，感谢网友的解决方案，访问路径：http://blog.csdn.net/qq_16559905/article/details/54177581

操作步骤：

1、安装完Node之后，为了保证速度，需要使用淘宝镜像，命令如下：
（1）npm config set registry "http://registry.npm.taobao.org"

（2）npm config list  可以查看配置
2.安装完nodejs之后,打开终端,执行命令:
(1)npm install webpack -g

//-g的意思是安装全局的webpack,但是我们实际的开发中还需要针对单个的项目进行webpack安装,执行命令:
3、使用 npm init 初始化，生成 package.json 文件：执行命令:
1. npm init 自定义创建package.json
2. npm init -yes 可以创建默认的package.json
现在我们的项目已经创建好了,接下来我们来添加依赖包及插件（1） 局部安装Webpack,执行命令：
npm install webpack --save-dev
（2）安装React,–save 命令用于将包添加至 package.json 文件,执行命令：
npm install  react react-dom react-router react-hot-loader css-loader  jsx-loader html-webpack-plugin --save-dev
（3） 安装babel插件,babel插件是webpack需要的加载器,如果没有这几个加载器我们的jsx语法，和es2015语法就会报错。
npm install babel-loader babel-core babel-preset-es2015 babel-preset-react babel-preset-stage-0 --save-dev
（4）安装自动刷新热更新服务，安装webpack-dev-server执行命令：
npm install webpack-dev-server --save-dev
（5）在package.json文件中为scripts添加,方便使用开启服务命令:
"scripts": {
"build": "webpack",
"dev": "webpack-dev-server --devtool eval --progress --colors --content-base build"
}
package.json全部文件附上：
{
"name": "tdip",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack",
"dev": "webpack-dev-server --devtool eval --progress --colors --content-base build"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"babel-loader": "^7.1.2",
"jquery": "^3.2.1"
},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"css-loader": "^0.28.7",
"html-webpack-plugin": "^2.30.1",
"jsx-loader": "^0.13.2",
"react": "^16.0.0",
"react-dom": "^16.0.0",
"react-hot-loader": "^1.3.1",
"react-router": "^4.2.0",
"webpack": "^3.6.0",
"webpack-dev-server": "^2.9.1"
}
}
安装完命令之后，创建webpack的配置文件：webpack.config.js文件webpack.config.js文件配置如下：
// module.exports = {
//     entry: __dirname + '/src',
//     output: {
//         path: __dirname + '/builds',
//         filename: 'bundle.js',
//     },
// };

var path = require('path'),
webpack = require('webpack'),
HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: ['webpack/hot/dev-server', __dirname + '/src'],
output: {
path: __dirname + '/builds',
filename: 'bundle.js'
},
devServer: {
inline: true,
port: 8099
},
module: {
loaders: [{
test: /\.js?$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel-loader',
query: {
presets: ['es2015', 'react']
}

}]
},
plugins: [
new HtmlWebpackPlugin({
template: './index.html'
}),
new webpack.HotModuleReplacementPlugin()
]
};
安装完成之后运行命令1、根目录下执行命令,其中一个：
npm run build         线上目录

npm run dev           开发目

2.浏览器直接访问:http://localhost:8099/index.html附上项目结构

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航