定西营销型网站建设,怎么用wordpress建外贸网站,钓鱼网站,上海公司网站备案01 为什么需要webpack构建工具#xff1f;
需要转化ES6及以上的语法#xff0c;因为低版本浏览器不支持ES6及以上的语法需要转化jsx的语法等需要补齐css的前缀#xff0c;因为不同浏览器对于css样式的兼容不同需要加前缀#xff0c;以及预处理器。压缩混淆#xff0c;压缩…01 为什么需要webpack构建工具
需要转化ES6及以上的语法因为低版本浏览器不支持ES6及以上的语法需要转化jsx的语法等需要补齐css的前缀因为不同浏览器对于css样式的兼容不同需要加前缀以及预处理器。压缩混淆压缩代码 图片等。 02 初始webpack配置文件的名称
webpack默认的配置文件是 webpack.config.js文件可以通过webpack --config 指定配置文件 03 webpack的配置组成
module.exports {entry:./src/index.js, 1 打包的入口文件output:./dist/main.js, 2 打包的出口文件mode:production, 3 环境module:{rules:[ {test:/\.txt$/, use:raw-loader} ] 4 解析的loader},plugins:[ 5 插件配置new HtmlwebpackPlugin({ template:/src/index.html})]
} 04 webpack环境的安装
第一步 打开终端安装nvm通过curl安装执行命令如下curl -o- https://raw.githubusercontent.com/nvm/v0.34.0/install.sh | bash第二步 将nvm添加到环境变量中去执行如下的代码soure ~/.bash_profile第三步 检测nvm是否安装成功执行如下命令nvm list 可以查看到已经安装的node的版本第四步 安装node.js:执行如下的代码nvm install v10.15.3 对应的node.js的版本号 05 创建初始的项目并按照webpack和webpack-cli
终端执行mkdir mv-project; 创建了mv-project的目录进入目录cd mv-project初始化项目 npm init -y安装webpack和webpack-cli: npm install webpack webpack-cli --save-dev查看webpack安装的版本终端中执行 ./node_modules/.bin/webpack -v上面的代码相当于在执行webpack这个打包工具。 06 简单的列子来看webpack的打包流程 第一步 创建webpack.config.js配置文件及相关脚本
const path require(path)module.exports {mode:production,entry:./src/index.js,output:{path:path.resolve(__dirname,dist),filename:bundle.js}} 第二步 需要在项目的跟目录下创建src目录以及index.jshello.js文件 hello.js文件代码如下
export const hello (){return hello webpack} index.js文件的代码如下
import {hello} from ./hello.jsdocument.write(hello())console.log(hello())
第三步 执行打包的命令在终端中执行如下命令
./node_modules/.bin/webpack 第四步 打包的结果 会在项目的根目录中创建一个dist目录并有一个bundle.js文件 同时需要创建index.html文件导入webpack打包生成的dist目录下的bundle.js的文件
HTMLheadbodyscript src./dist/bundle.js/scrit/body/head/Html
07 简化./node_modules/bin/webpack打包的命令通过npm run build进行打包
在package.json文件中scripts对象中创建执行webpack脚本的命令原理模板局部安装会在node_modules/.bin目录下创建软连接{name: vue2code,version: 1.0.0,description: ,main: index.js,scripts: {build: webpack,},keywords: [],author: ,license: ISC,dependencies: {}
}
