网站开发行业新闻,做属于公司的网站有什么好处,北京商城网站设计,微网站医院策划案本文简单记录学习webpack3.0的笔记#xff0c;已备日后查阅。节省查阅文档时间 安装 可以使用npm安装 //全局安装
npm install -g webpack
//安装到项目目录
npm install --save-dev webpack npm init会创建package.json文件。配置该文件可以简化我们之后的一些操作#xff0…本文简单记录学习webpack3.0的笔记已备日后查阅。节省查阅文档时间 安装 可以使用npm安装 //全局安装
npm install -g webpack
//安装到项目目录
npm install --save-dev webpack npm init会创建package.json文件。配置该文件可以简化我们之后的一些操作比如我们对其中的“script”添加start命令可以用“npm start”替代webpack命令 {name: webpack-example,...scripts: {start: webpack},...
} 几个概念 webpack是一个现代javascript应用程序的静态模块打包器。它构建一个依赖关系图包含所有模块打包成一个或多个bundle。 四个核心概念 entry 指示webpack应该从哪个模块开始构建依赖图。默认值./srcoutput指示在哪里输出创建的bundles默认值./distloader让 webpack 能够去处理那些非 JavaScript 文件。loader 能够 import 导入任何类型的模块plugin插件的范围包括从打包优化和压缩一直到重新定义环境中的变量entry 文件的指定 单一entry文件 mkdir entrydemo
cd entrydemo
npm init npm init会让你输入一些信息配置package.json。如下 {name: entrydemo,version: 1.0.0,description: ,main: main.js,scripts: {test: echo \Error: no test specified\ exit 1},author: ,license: MIT
} 接下来我们要创建index.html和main.js文件。main.js文件操作index.html的p标签内容 index.html !DOCTYPE html
htmlheadmeta charsetUTF-8/headbodyp idtitle/pscript typetext/javascript srcmain.js/script/body
/html main.js document.getElementById(title).innerHTMLHELLO webpack; 下面我们要用webpack将main.js打包成bundle.js文件 如果你的webpack是全局安装那么 webpack main.js bundle.js 如果是安装在项目根目录 node_modules/.bin/webpack main.js bundle.js 注意在webpack3中webpack-cli是集成的到了4里面分开来了。第一次webpack时候可能会提示你安装webpack-cli安装即可。上面的命令也有所改变关于webpack4本文不赘述 然后将index.html的javascript路径改为bundle.js script typetext/javascript srcbundle.js/script 然后打开index.html可以看到页面和上面是一样的 以上是用命令行指定entry file下面我们写配置文件webpack.config.js去构建bundle.js module.exports {entry: ./main.js,output: {filename: bundle.js}
} 写好配置文件后运行webpack命令就构建好bundle.js了。非全局安装是node_modules/.bin/webpack 多个entry file 假设我们的入口文件是main1.js和 main2.js对应输出是bundle1.js和bundle2.js webpack.config.js这么写 module.exports {entry: {bundle1: main1.js,bundle2: main2.js}output: {filename: [name].js}
} loader Babel-loader Babel-loader用来将JSX/ES6文件转换成普通JS文件 module.exports {entry: ./main.jsx,output: {filename: bundle.js},module: {rules: [{test: /\.jsx?$/,exclude: /node_modules/,use: {loader: babel-loader,options: {presets: [es2015, react]}}}]}
}; CSS-loader webpack.config.js module.exports {entry: ./main.js,output: {filename: bundle.js},module: {rules:[{test: /\.css$/,use: [ style-loader, css-loader ]},]}
}; 转载于:https://www.cnblogs.com/pusidun/p/9087057.html
