朝鲜旅游报价,mm被虐吸奶小游戏,二次曝光快播
webpack是前端开发必用的打包工具,在webpack下开发前端会省很多事,变得很简单.
第一步,新建npm项目
mkdir web-project cd web-project npm init -y
第二步,初始化项目:用npm 安装 vue,webpack等等
npm i webpack vue vue-loader css-loader vue-template-compiler
第三步,新建源码放置目录
mkdir src
在src下新建一个app.vue文件,写入下面的内容:
{{text}}
<script> export default { data(){ return { text: 'abc' } } } </script>#test{ color: red }
在项目根目录 web-project下,新建一个webpack的配置文件,随意起名为 webpack.config.js. 在里面写入下面的内容:
const path=require('path') module.exports = { entry: path.join(__dirname,"src/index.js"), output: { filename: "bundle.js", path: path.join(__dirname,'dist') }, module: { rules: [ { test:/.vue$/, loader: "vue-loader" } ] } }
在src目录下新建一个文件index.js,并写入下面的内容:
import Vue from 'vue' import App from './app.vue' const root=document.createElement('p') document.body.appendChild(root) new Vue({ render:(h) => h(App) }).$mount(root)
在package.json 里面找到"scripts": { "test": "echo \"Error: no test specified\" && exit 1" } 往”scriptes”添加一个脚本,修改后是这样的:
"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "webpack --config webpack.config.js" }
打开终端,在项目根目录下运行
npm run build
在根目录下能看到多了一个 dist目录及其内bundle.js.
修改 webpack.config.js ,在module下增加几个rules,修改后是下面这样:
... module: { rules: [ { test:/\.vue$/, loader: "vue-loader" }, { test:/\.css$/, use:[ 'style-loader', 'css-loader' ] }, { test:/\.(gif|jpg|png|svg)$/, use:[ { loader: "url-loader", options: { limit:1024, name:'[name]-aaa.[ext]' } } ] } ] } ...
用 npm安装上面rules配置的loader:
npm i style-loader url-loader file-loader
现在就可以直接去在js中 import 非 js 的内容了.
现在做一个简单的在js代码中引入 css 和 图片.
在根目录下新建 目录 assets, 在其下新建目录styles,在其下新建样式文件 test.css,内容如下:
body{ color: red; background-image: url("../images/bg.jpg"); }
然后在index.js中引入 test.css:
import './assets/styles/test.css'
这样,等编译后,test.css的内容就会以js的形式出现在bundle.js中,长得就像这样:
exports.push([module.i, "body{\n color: red;\n background-image: url(" + escape(__webpack_require__(4)) + ");\n}", ""]);
在test.css中的背景图片,会用js以base64编码的方式,写入到bundle.js中.
现在来看看在js中引入 图片
在assets下新建目录images,并放入一张图片,这里将其随意取名为bg.jpg. 然后就可以在index.js中引入这张图片,就像下面这样:
import './assets/images/bg.jpg'
运行npm run build编译后,就能在dist目录下看到这张图片,说明编译已经通过了.
在webpack.config.js文件的rules下,加入新的规则块:
{ test:/\.styl/, use:[ 'style-loader', 'css-loader', 'stylus-loader' ] }
现在完整的rules就像这样了:
... rules: [ { test:/\.vue$/, loader: "vue-loader" }, { test:/\.css$/, use:[ 'style-loader', 'css-loader' ] }, { test:/\.(gif|jpg|png|svg)$/, use:[ { loader: "url-loader", options: { limit:1024, name:'[name]-aaa.[ext]' } } ] }, { test:/\.styl/, use:[ 'style-loader', 'css-loader', 'stylus-loader' ] } ] ...
安装 stylus-loader:
npm i stylus-loader stylus
现在就可以用stylus来写css了.
同样的,其他的css预处理器也可以这样简单的配置,相应的loader都能在github上面找到.
webpack的loader是一层一层往上扔的,列如:
test:/\.styl/, use:[ 'style-loader', 'css-loader', 'stylus-loader' ]
这里就是 stylus-loader处理完,然后丢给css-loader,然后css-loader处理完又丢给上面的style-loader.
安装一个包
npm i webpack-dev-server
在package.json 里面找到"scripts": {... ... } 往”scriptes”里添加一个脚本,修改后是这样的:
"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "webpack --config webpack.config.js", "dev": "webpack-dev-server --config webpack.config.js" },
安装一个包npm i cross-env,这个包用于方便的设置环境变量 .
把刚刚在package.json中写的脚本命名加上环境变量,就像这样子的:
"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "cross-env NODE_ENV=production webpack --config webpack.config.js", "dev": "cross-env NODE_ENV=development webpack-dev-server --config webpack.config.js" },
然后修改一下webpack.config.js.修改完后是这个样子:
const path=require('path') const HTMLPlugin = require('html-webpack-plugin') const webpack = require('webpack') const isDev = process.env.NODE_ENV === 'development' const config = { target:'web', entry: path.join(__dirname,"src/index.js"), output: { filename: "bundle.js", path: path.join(__dirname,'dist') }, module: { rules: [ { test:/\.vue$/, loader: "vue-loader" }, { test:/\.css$/, use:[ 'style-loader', 'css-loader' ] }, { test:/\.(gif|jpg|png|svg)$/, use:[ { loader: "url-loader", options: { limit:1024, name:'[name]-aaa.[ext]' } } ] }, { test:/\.styl/, use:[ 'style-loader', 'css-loader', 'stylus-loader' ] } ] }, plugins: [ //vue等常用到 new webpack.DefinePlugin({ 'process.env':{ //单引号里面是双引号; //在这里定义了的 isDev在代码里面可以引用 NODE_ENV:isDev ? '"development"' : '"production"' } }), new HTMLPlugin() ] } if(isDev){ //设置浏览器调试代码 config.devtool = '#cheap-module-eval-source-map' // webpack2.0 才有的devServer配置 config.devServer = { port:'8000', host:'0.0.0.0', overlay:{ //错误显示在网页上 errors:true, }, //启动完后自动打开浏览器 open:true, } } module.exports = config
现在,运行 npm run dev ,在浏览器中输入 https://127.0.0.1:8000 已经可以看到一个简单的vue写的页面了,
如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复
[书籍精读]《响应式Web设计 HTML5和CSS3实战(第二版)》精读笔记分享
网友评论