webpack工程搭建
Posted ccdat
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了webpack工程搭建相关的知识，希望对你有一定的参考价值。
>>建立nodejs工程
新建文件夹，npm init 生成package.json
>>安装webpack 和 webpack-dev-server
npm install --save-dev [email protected] 注意4.x版本语法有些变化
npm install --save-dev [email protected] 注意踩坑记录1
>>安装babel转码es6
Babel其实是几个模块化的包，其核心功能位于称为babel-core的npm包中，webpack可以把其不同的包整合在一起使用，对于每一个你需要的功能或拓展，你都需要安装单独的包（用得最多的是解析Es6的babel-env-preset包和解析JSX的babel-preset-react包）。
npm install --save-dev babel-core babel-loader babel-preset-react babel-preset-env
>>支持 react 开发
npm install --save-dev react react-dom 注意这里是本地安装，也可以用全局安装
安装其他可选插件：
>>配置webpack.config.js
踩坑记录
1：webpack是3.x版本的，webpack-dev-server是3.x的版本，这两个版本不兼容，可以把webpack-dev-server降到2.x版本
踩坑解决办法示例：TypeError: Cannot read property ‘compile‘ of undefined #1334
解决思路： 优先使用 Google 引擎进行搜索关键词句, 比如 webpack Cannot read property ‘compile‘ of undefined；看能否找到相应的问题。
如果不行，不妨换一种方式再搜索，譬如：site:stackoverflow.com webpack Cannot read property ‘compile‘ of undefined，在具体某个网站下搜索；如果还是没能找见解决办法的话，可以在各种平台提问，比如 segmentfault。
额外补充： 对于 Google 这个工具还真是有必要先学，具体常用操作可参见：如何更好地运用 Chrome (Google)。倘若，不能够没有适用 Google 的环境，那么这里整理集结若干优质搜索引擎，堪称 Google 搜索优质替代品，可供参考。
package.json 示例：
{ "name": "testwordexport", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo "Error: no test specified" && exit 1", "build": "webpack --env.NODE_ENV=development", "start": "webpack-dev-server" }, "author": "LCJ", "license": "ISC", "devDependencies": { "babel-core": "^6.26.3", "babel-loader": "^8.0.4", "babel-preset-env": "^1.7.0", "babel-preset-react": "^6.24.1", "clean-webpack-plugin": "^1.0.0", "html-webpack-plugin": "^3.2.0", "webpack": "^3.8.1", "webpack-dev-server": "^2.9.7" }, "dependencies": { "react": "^16.7.0", "react-dom": "^16.7.0" } }
webpack.config.js 示例：
const path = require(‘path‘); // const webpack = require(‘webpack‘); const HtmlWebpackPlugin = require(‘html-webpack-plugin‘); const CleanWebpackPlugin = require(‘clean-webpack-plugin‘); module.exports = { entry: { index: ‘./src/index.js‘, }, output: { filename: ‘[name].bundle.js‘, path: path.resolve(__dirname, ‘dist‘) }, module:{ rules:[ { test:‘/.(js|jsx)$/‘, use:{ loader:‘babel-loader‘, options: { presets: [ "env", "react" ] } }, exclude:/node_module/ } ] }, plugins: [ new CleanWebpackPlugin([‘dist‘]), new HtmlWebpackPlugin({ title: ‘测试输入‘, template: ‘src/template/index.html‘ }) // new webpack.optimize.UglifyJsPlugin() ], devServer: { contentBase: path.join(__dirname, "dist"),//本地服务器所加载的页面所在的目录 inline: true, //实时刷新 port: 9000, //端口改为9000 open:true // 自动打开浏览器 } };
模板html示例：
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title><%=htmlWebpackPlugin.options.title %></title> <meta charset="utf-8" /> <style> .center{ width:500px; margin: 0 auto; } </style> </head> <body> <div id="template-containerId" class="center" > <input type="text" id="testText" value="测试输入"></text> <input type="button" id="testBtn" value="开始"></text> </div> </body> </html>
以上是关于webpack工程搭建的主要内容，如果未能解决你的问题，请参考以下文章