webpack安装与基本配置
2017-08-01 01:04
661 查看
安装
全局安装
npm install -g webpack
本地安装(安装到项目目录下)
npm install –save-dev webpack
创建package.json
终端中在项目目录下输入命令npm init 自动生成package.json文件,这是一个标准的npm说明文件,包括当前项目的依赖模块,自定义的脚本任务等等
搭建项目结构
index.js
sub.js
webpack.config.js配置
其中插件项plugins,有webpack中内置的如UglifyJsPlugin,以及需要通过npm引入的第三方包如html-webpack-plugin,另外通过webpack构建本地服务器而来,以上命令如下:
此时package.json配置如下:
scripts中start需手动添加,实时监听项目变化
文件打包
生成build文件夹,以及内部的bundle.js和index.html
项目打包
npm start
浏览器地址栏中输入localhost:8080,修改js文件、可获得实时更新
结尾
最基本的webpack安装与配置就暂时告一段落了,待续!
全局安装
npm install -g webpack
本地安装(安装到项目目录下)
npm install –save-dev webpack
创建package.json
终端中在项目目录下输入命令npm init 自动生成package.json文件,这是一个标准的npm说明文件,包括当前项目的依赖模块,自定义的脚本任务等等
{ "name": "new-project", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC", "devDependencies": { "webpack": "^3.4.1", } }
搭建项目结构
index.js
var sub = require('./sub'); var app = document.createElement('div'); app.innerHTML = '<h1>Hello 22222 World</h1>'; app.appendChild(sub()); document.body.appendChild(app);
sub.js
function generateText() { var element = document.createElement('h2'); element.innerHTML = "hello h2 world"; return element; } module.exports = generateText;
webpack.config.js配置
var HtmlWebpackPlugin = require('html-webpack-plugin'); var webpack = require('webpack'); module.exports = { // 入口文件名称 entry: __dirname + "/app/index.js", // 输出文件名称 output: { //"__dirname" 是node.js中的一个全局变量,它指向当前执行脚本所在的目录 path: __dirname + '/build',//打包后文件的存放地方 filename: "bundle.js"//打包后输出文件的文件名 }, // 插件项 plugins: [ // 压缩生成的js代码,webpack中内置的plugin new webpack.optimize.UglifyJsPlugin(), new HtmlWebpackPlugin({ //生成的html文件的title,默认Webpack APP title: "Test App" }) ], devServer: { //本地服务器所加载的页面所在的目录 contentBase: __dirname + "/build", historyApiFallback: true,//不跳转 inline: true,//当源文件改变时,自动刷新页面 port: 8080//端口 } }
其中插件项plugins,有webpack中内置的如UglifyJsPlugin,以及需要通过npm引入的第三方包如html-webpack-plugin,另外通过webpack构建本地服务器而来,以上命令如下:
npm install html-webpack-plugin webpack-dev-server --save-dev
此时package.json配置如下:
{ "name": "new-project", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "start": "webpack-dev-server --hot --inline", "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC", "devDependencies": { "html-webpack-plugin": "^2.29.0", "webpack": "^3.4.1", "webpack-dev-server": "^2.6.1" } }
scripts中start需手动添加,实时监听项目变化
文件打包
生成build文件夹,以及内部的bundle.js和index.html
项目打包
npm start
浏览器地址栏中输入localhost:8080,修改js文件、可获得实时更新
结尾
最基本的webpack安装与配置就暂时告一段落了,待续!
相关文章推荐
- webpack安装配置使用教程详解
- webpack的安装个配置
- webpack基本配置
- WebPack安装-使用-Loader-配置-插件-环境-排错详解(下)
- webpack安装配置以及填坑操作之 webpack command not found 的解决方法
- webpack+vue 构建项目步骤并且使用sass 安装配置
- Web服务器的配置与管理(1) IIS的安装与基本设置 推荐
- WebPack安装-使用-Loader-配置-插件-环境-排错详解(中)
- 二、webpack的基本配置(1)
- webpack-2-基本配置
- windows下安装nodejs 、webpack及vue.js的基本使用<一>
- 关于网页开发webpack基本配置.
- webpack的安装和配置
- React系列学习笔记:1.React与webpack基本配置
- webpack4.0.1安装问题和webpack.config.js的配置变化
- webpack的基本配置
- webpack安装配置
- WebPack安装-使用-Loader-配置-插件-环境-排错详解(上)
- Weapck 3.x 安装与配置webpack dev server
- Webpack基本配置介绍