文章目录
1 Webpack介绍及安装
https://webpack.js.org/concepts/
https://www.webpackjs.com/
- 本质上来讲，webpack是一个现代的JavaScript应用的静态模块打包工具
安装：
-
首先要安装Node.js、版本大于8.9
-
查看node版本
node -v
- 全局安装webpack(指定3.6.0、因为vue cli2依赖该版本)
npm install webpack@3.6.0 -g
cd 对应目录
npm install webpack@3.6.0 --save-dev
-
在终端直接执行webpack命令，使用全局安装的webpack
-
当package.json中定义了scripts时时，其中包含了webpack命令，那么使用的是局部webpack
2 webpack起步
打包
webpack ./src/main.js ./dist/bundle.js
3 webpack配置
webpack.config.js
const path = require('path')
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname,'dist'),
filename: 'bundle.js'
}
}
打包
webpack
使用脚本
# 初始化
npm init
# 安装package-lock.json中的依赖
npm install
package.json文件中scripts存放脚本，可以自定义
{
"name": "meetwebpack",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
},
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^3.6.0"
}
}
# 测试脚本
npm run test
# 打包
npm run build
4 loader
4.1 css-loader、style-loader
- 通过npm安装需要使用的loader
https://www.webpackjs.com/loaders/css-loader/
安装cssl和style的loader
npm install --save-dev css-loader
npm install style-loader@2.0.0 --save-dev
file.js
import css from 'file.css';
webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
}
]
}
}
- 在webpack.config.js中module关键字下进行配置
4.2 less-loader
npm install --save-dev less-loader less
5 webpack图片文件处理
url-loader
npm install --save-dev url-loader
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 8192
}
}
]
}
css
body {
background: url("../img/1.jpg");
}
6 webpack使用vue的配置
npm install vue --save
webpack.config.js
resolve:{
alias:{
'vue$':'vue/dist/vue.esm.js'
}
}
main.js
import Vue from 'vue'
const app = new Vue({
el: '#app',
data: {
message: '你好'
}
})
npm install vue-loader@15.4.2 vue-template-compiler@2.5.21 --save-dev
代码地址：
https://github.com/courageSteak/vue-framework
<p><h3>文章目录</h3><ul><ul><li><a href="#1_Webpack_2">1 Webpack介绍及安装</a></li><li><a href="#2_webpack_39">2 webpack起步</a></li><li><a href="#3_webpack_47">3 webpack配置</a></li><li><a href="#4_loader_108">4 loader</a></li><ul><li><a href="#41_cssloaderstyleloader_110">4.1 css-loader、style-loader</a></li><li><a href="#42_lessloader_146">4.2 less-loader</a></li></ul><li><a href="#5_webpack_152">5 webpack图片文件处理</a></li><li><a href="#6_webpackvue_182">6 webpack使用vue的配置</a></li></ul></ul></p>
<h2><a id="1_Webpack_2"></a>1 Webpack介绍及安装</h2>
<p>https://webpack.js.org/concepts/</p>
<p>https://www.webpackjs.com/</p>
<ul>
<li>本质上来讲，webpack是一个现代的JavaScript应用的静态模块打包工具</li>
</ul>
<p>安装：</p>
<ul>
<li>
<p>首先要安装<code>Node.js</code>、版本大于<code>8.9</code></p>
</li>
<li>
<p>查看node版本</p>
</li>
</ul>
<pre><div class="hljs"><code class="lang-shell">node -v
</code></div></pre>
<ul>
<li>全局安装webpack(指定3.6.0、因为vue cli2依赖该版本)</li>
</ul>
<pre><div class="hljs"><code class="lang-shell">npm install webpack@3.6.0 -g
</code></div></pre>
<ul>
<li>局部安装</li>
</ul>
<pre><div class="hljs"><code class="lang-shell">cd 对应目录
npm install webpack@3.6.0 --save-dev
</code></div></pre>
<ul>
<li>为什么全局安装后，还需要局部安装呢？</li>
</ul>
<ol>
<li>
<p>在终端直接执行webpack命令，使用全局安装的webpack</p>
</li>
<li>
<p>当package.json中定义了scripts时时，其中包含了webpack命令，那么使用的是局部webpack</p>
</li>
</ol>
<h2><a id="2_webpack_39"></a>2 webpack起步</h2>
<p>打包</p>
<pre><div class="hljs"><code class="lang-shell">webpack ./src/main.js ./dist/bundle.js
</code></div></pre>
<h2><a id="3_webpack_47"></a>3 webpack配置</h2>
<p><code>webpack.config.js</code></p>
<pre><div class="hljs"><code class="lang-js"><span class="hljs-comment">// 使用node的包path</span>
<span class="hljs-comment">// 初始化: npm init</span>
<span class="hljs-keyword">const</span> path = <span class="hljs-built_in">require</span>(<span class="hljs-string">'path'</span>)
<span class="hljs-variable language_">module</span>.<span class="hljs-property">exports</span> = {
<span class="hljs-attr">entry</span>: <span class="hljs-string">'./src/main.js'</span>,
<span class="hljs-attr">output</span>: {
<span class="hljs-attr">path</span>: path.<span class="hljs-title function_">resolve</span>(__dirname,<span class="hljs-string">'dist'</span>),<span class="hljs-comment">// 当前文件绝对路径</span>
<span class="hljs-attr">filename</span>: <span class="hljs-string">'bundle.js'</span>
}
}
</code></div></pre>
<p>打包</p>
<pre><div class="hljs"><code class="lang-shell">webpack
</code></div></pre>
<p>使用脚本</p>
<pre><div class="hljs"><code class="lang-shell"><span class="hljs-meta"># </span><span class="language-bash">初始化</span>
npm init
<span class="hljs-meta"># </span><span class="language-bash">安装package-lock.json中的依赖</span>
npm install
</code></div></pre>
<p>package.json文件中scripts存放脚本，可以自定义</p>
<pre><div class="hljs"><code class="lang-js">{
<span class="hljs-string">"name"</span>: <span class="hljs-string">"meetwebpack"</span>,
<span class="hljs-string">"version"</span>: <span class="hljs-string">"1.0.0"</span>,
<span class="hljs-string">"description"</span>: <span class="hljs-string">""</span>,
<span class="hljs-string">"main"</span>: <span class="hljs-string">"index.js"</span>,
<span class="hljs-string">"scripts"</span>: {
<span class="hljs-string">"test"</span>: <span class="hljs-string">"echo \"Error: no test specified\" && exit 1"</span>,
<span class="hljs-string">"build"</span>: <span class="hljs-string">"webpack"</span>
},
<span class="hljs-string">"author"</span>: <span class="hljs-string">""</span>,
<span class="hljs-string">"license"</span>: <span class="hljs-string">"ISC"</span>,
<span class="hljs-string">"devDependencies"</span>: {
<span class="hljs-string">"webpack"</span>: <span class="hljs-string">"^3.6.0"</span>
}
}
</code></div></pre>
<pre><div class="hljs"><code class="lang-js">
# 测试脚本
npm run test
# 打包
npm run build
</code></div></pre>
<h2><a id="4_loader_108"></a>4 loader</h2>
<h3><a id="41_cssloaderstyleloader_110"></a>4.1 css-loader、style-loader</h3>
<ol>
<li>通过npm安装需要使用的loader</li>
</ol>
<p><a href="https://www.webpackjs.com/loaders/css-loader/" target="_blank">https://www.webpackjs.com/loaders/css-loader/</a></p>
<p>安装cssl和style的loader</p>
<pre><div class="hljs"><code class="lang-shell">npm install --save-dev css-loader
npm install style-loader@2.0.0 --save-dev
</code></div></pre>
<p>file.js</p>
<pre><div class="hljs"><code class="lang-js"><span class="hljs-keyword">import</span> css <span class="hljs-keyword">from</span> <span class="hljs-string">'file.css'</span>;
</code></div></pre>
<p>webpack.config.js</p>
<pre><div class="hljs"><code class="lang-js"><span class="hljs-variable language_">module</span>.<span class="hljs-property">exports</span> = {
<span class="hljs-attr">module</span>: {
<span class="hljs-attr">rules</span>: [
{
<span class="hljs-attr">test</span>: <span class="hljs-regexp">/\.css$/</span>,
<span class="hljs-attr">use</span>: [ <span class="hljs-string">'style-loader'</span>, <span class="hljs-string">'css-loader'</span> ]
}
]
}
}
</code></div></pre>
<ol start="2">
<li>在webpack.config.js中module关键字下进行配置</li>
</ol>
<h3><a id="42_lessloader_146"></a>4.2 less-loader</h3>
<pre><div class="hljs"><code class="lang-shell">npm install --save-dev less-loader less
</code></div></pre>
<h2><a id="5_webpack_152"></a>5 webpack图片文件处理</h2>
<p>url-loader</p>
<pre><div class="hljs"><code class="lang-js">npm install --save-dev url-loader
{
<span class="hljs-attr">test</span>: <span class="hljs-regexp">/\.(png|jpg|gif)$/</span>,
<span class="hljs-attr">use</span>: [
{
<span class="hljs-attr">loader</span>: <span class="hljs-string">'url-loader'</span>,
<span class="hljs-attr">options</span>: {
<span class="hljs-attr">limit</span>: <span class="hljs-number">8192</span>
}
}
]
}
</code></div></pre>
<p>css</p>
<pre><div class="hljs"><code class="lang-css"><span class="hljs-selector-tag">body</span> {
<span class="hljs-comment">/*background-color: pink;*/</span>
<span class="hljs-attribute">background</span>: <span class="hljs-built_in">url</span>(<span class="hljs-string">"../img/1.jpg"</span>);
}
</code></div></pre>
<h2><a id="6_webpackvue_182"></a>6 webpack使用vue的配置</h2>
<pre><div class="hljs"><code class="lang-shell">npm install vue --save
</code></div></pre>
<p>webpack.config.js</p>
<pre><div class="hljs"><code class="lang-js"><span class="hljs-comment">// 指定查找vue的路径</span>
<span class="hljs-attr">resolve</span>:{
<span class="hljs-comment">// alias: 别名</span>
<span class="hljs-attr">alias</span>:{
<span class="hljs-string">'vue$'</span>:<span class="hljs-string">'vue/dist/vue.esm.js'</span>
}
}
</code></div></pre>
<p>main.js</p>
<pre><div class="hljs"><code class="lang-js"><span class="hljs-comment">// 5.使用vue进行开发</span>
<span class="hljs-keyword">import</span> <span class="hljs-title class_">Vue</span> <span class="hljs-keyword">from</span> <span class="hljs-string">'vue'</span>
<span class="hljs-keyword">const</span> app = <span class="hljs-keyword">new</span> <span class="hljs-title class_">Vue</span>({
<span class="hljs-attr">el</span>: <span class="hljs-string">'#app'</span>,
<span class="hljs-attr">data</span>: {
<span class="hljs-attr">message</span>: <span class="hljs-string">'你好'</span>
}
})
</code></div></pre>
<pre><div class="hljs"><code class="lang-shell">npm install vue-loader@15.4.2 vue-template-compiler@2.5.21 --save-dev
</code></div></pre>
<p>代码地址：<br />
https://github.com/courageSteak/vue-framework</p>
留言